كيف يتم التحقق من صحة البريد الإلكتروني في JavaScript؟ [مع أمثلة]

نشرت: 2021-02-23

JavaScript هي لغة برمجة مصممة لإنشاء التطبيقات. إنه أسرع بكثير من اللغات الأخرى لأنه خفيف الوزن وسهل الاستخدام. يتم استخدامه لإنشاء تطبيقات جيدة التصميم.

يعد التحقق من صحة البريد الإلكتروني في JavaScript أمرًا مهمًا لتجربة المستخدم في إنشاء تطبيقات الويب. يساعد التحقق من الصحة في تمرير المعلومات الصالحة إلى الخادم من عميل تطبيق الويب.

جدول المحتويات

ما هو المصادقة؟

يشير التحقق من الصحة إلى عملية فحص القيم التي يُدخلها المستخدم. يلعب دورًا مهمًا في إنشاء التطبيقات ويعزز تجربة المستخدم. يتم التحقق من صحة العديد من الحقول ، مثل أرقام الهواتف المحمولة ورسائل البريد الإلكتروني والتواريخ وكلمات المرور من خلال هذه العملية.

تجعل JavaScript عملية التحقق أسرع نظرًا لمعالجتها للبيانات بشكل أسرع من التحقق من جانب الخادم. الآن دعنا نلقي نظرة على تنفيذ التحقق من صحة البريد الإلكتروني في JavaScript .

التحقق من صحة البريد الإلكتروني في JavaScript

يعد التحقق من صحة البريد الإلكتروني أحد الأجزاء الحيوية لمصادقة نموذج HTML. البريد الإلكتروني هو مجموعة فرعية أو سلسلة من أحرف ASCII ، مقسمة إلى جزأين باستخدام الرمز @. يتكون الجزء الأول من المعلومات الخاصة ، ويحتوي الجزء الثاني على اسم المجال الذي يتم فيه تسجيل البريد الإلكتروني.

فيما يلي أحرف ASCII للجزء الأول:

  • أحرف خاصة مثل # * + & '! ٪ @؟ {^} ”
  • أحرف رقمية (من 0 إلى 9)
  • توقف كامل ، نقطة ، وما إلى ذلك ، بشرط ألا يكون آخر حرف في البريد الإلكتروني أو الحرف الأول ولا يمكن تكراره بعد آخر.
  • الحروف الهجائية الكبيرة (من الألف إلى الياء) والحروف الأبجدية الصغيرة (من الألف إلى الياء)

الجزء الثاني يشمل ما يلي:

  • النقاط
  • أرقام
  • واصلات
  • حروف

يعد استخدام التعبيرات العادية أحد أفضل الطرق للتحقق من صحة البريد الإلكتروني في JavaScript . يستخدم التعبيرات العادية لتحديد نمط الشخصية.

بعض الأمثلة على معرف البريد الإلكتروني الصالح:

بعض الأمثلة الأخرى لمعرف البريد الإلكتروني غير صالح

  • Owner.me..7080 @ abcd.com (لا يُسمح بنقاط واحدة على أخرى)
  • Inownzsite () & @ abcd.com (يُسمح فقط بالأحرف والشرطة والشرطة السفلية والأرقام في التعبير العادي.)
  • Ourwebsiteismne.azbyz.com (هنا @ الرمز غير موجود)
  • yourminewebsite @ .com.you (هنا لا يمكن أن يبدأ نطاق المستوى الأعلى بنقطة)
  • @ youmenandwe.we.net (هنا لا يمكن أن تبدأ بالرمز @)
  • [email protected] (“.b” ليس نطاق مستوى أعلى صالحًا) email.js

يتكون الملف من كود JavaScript مطلوب للتحقق من صحة البريد الإلكتروني. هنا يتم استخدام التعبيرات العادية للتحقق من صحة البريد الإلكتروني من جانب العميل في التطبيق.

نقاط التحقق للتحقق الفعال من البريد الإلكتروني في كود JavaScript:

  • قم بوصف تعبير عادي للتحقق من صحة عنوان البريد الإلكتروني
  • إذا كانت قيمة الإدخال تتطابق مع التعبيرات العادية
  • إذا كان متطابقًا ، فسيتم إرسال التنبيه الذي يفيد بأن "عنوان البريد الإلكتروني صالح".
  • إذا لم يتطابق ، أرسل التنبيه قائلاً ، "عنوان البريد الإلكتروني غير صالح".

ذات صلة: التحقق من صحة كلمة المرور في جافا سكريبت

كود التحقق من البريد الإلكتروني في JavaScript

فيما يلي رمز التحقق من البريد الإلكتروني في JavaScript. يمكن التحقق من صحة هذا الرمز إذا كان البريد الإلكتروني الذي تم إنشاؤه أو إدخاله من قبل المستخدم صالحًا أم لا. احفظ الملف باسم filename.js.

/ / رمز مقتطف

وظيفة EmailValidation (تم إدخال البريد الإلكتروني)

{

var mail_format = / ^w+([.-]؟w+)*@w+([.-]؟w+)*(.w{2،3})+$/؛

إذا (تم إدخال البريد الإلكتروني .value.match (تم إدخال البريد الإلكتروني))

{

تنبيه ("نعم! بريد إلكتروني صالح!") ؛

document.form1.text1.focus () ؛

العودة صحيح

}

آخر

{

تنبيه ("آسف! بريد إلكتروني غير صالح!") ؛

document.form1.text1.focus () ؛

عودة كاذبة؛

}

}

يتم استخدام وظيفة JavaScript في شكل HTML على النحو التالي. احفظ الملف باسم filename.html:

<! DOCTYPE html>

<html lang = ”en”>

<head>

<meta charset = ”utf-8 ″>

<title> التحقق من صحة البريد الإلكتروني في JavaScript </title>

<link rel = 'stylesheet' href = 'form-style.css' type = 'text / css' />

</head>

<body onload = 'document.form1.text1.focus ()'>

<div class = ”mail”>

<h2> أدخل البريد الإلكتروني للتحقق </ h2>

<اسم النموذج = ”form1 ″ الإجراء =” # ”>

<ul>

<li> <input type = 'text' name = 'text1' /> </li>

<li> </li>

<li class = ”Validate”> <input type = ”submit” name = ”Validate” value = ”Validate” onclick = ”ValidateEmail (document.form1.text1)” /> </li>

<li> </li>

</ul>

</form>

</div>

<script src = ”filename.js”> </script>

</body>

</html>

يمكن أن تضيف الكود التالي نمطًا إلى النموذج باستخدام CSS. احفظ الملف باسم filename.css.

li {list-style-type: none؛

حجم الخط: 16 نقطة ؛

}

.بريد {

الهامش: تلقائي ؛

أعلى الحشو: 20 بكسل ؛

الحشو السفلي: 20 بكسل ؛

العرض: 850 بكسل ؛

الخلفية: RGB (150 ، 195 ، 208) ؛

الحدود: 1px soild rgb (1 ، 20 ، 24) ؛

}

.mail h2 {

الهامش الأيسر: 36 بكسل ؛

}

إدخال {

حجم الخط: 28 نقطة ؛

}

الإدخال: التركيز ، منطقة النص: التركيز {

لون الخلفية: أبيض؛

}

إدخال إرسال {

حجم الخط: 18 نقطة ؛

}

يمكنك الآن تنفيذ كود HTML والحصول على التحقق من صحة البريد الإلكتروني في JavaScript .

قراءة: مشاريع جافا سكريبت في جيثب

تعلم دورات البرمجيات عبر الإنترنت من أفضل الجامعات في العالم. اربح برامج PG التنفيذية أو برامج الشهادات المتقدمة أو برامج الماجستير لتتبع حياتك المهنية بشكل سريع.

خاتمة

يعد التحقق من صحة البريد الإلكتروني أمرًا بالغ الأهمية لتجنب عمل عناوين بريد إلكتروني غير صالحة. في هذه المقالة ، تم شرحه ، مع الرمز ، للتحقق مما إذا كان معرف البريد الإلكتروني صالحًا أم لا والسماح للنظام بالتحقق وإخطار المستخدم إذا كان معرف البريد الإلكتروني الذي تم إدخاله غير صالح.

إذا كنت مهتمًا بمعرفة المزيد حول التطوير الكامل ، فراجع برنامج upGrad & IIIT-B Executive PG في تطوير البرامج الكامل المكدس المصمم للمهنيين العاملين ويقدم أكثر من 500 ساعة من التدريب الصارم ، وأكثر من 9 مشاريع ومهام ، وحالة خريجي IIIT-B ، ومشاريع التخرج العملية العملية والمساعدة في العمل مع الشركات الكبرى.

انطلق في وظيفة أحلامك

تقدم الآن لبرنامج Executive PG في Full Stack Development