למשל אימות דוא"ל עם JavaScript (Regex)

פעמים רבות מציגים בפנינו את הצורך לאמת שכתובת מייל מוזנת בשדה מסוים בטופס שלנו. אימייל תקף. במאמר זה, נלמד כיצד לאמת הודעות דוא"ל באמצעות ביטויים רגולריים (הידועים גם בשם regex) ב-JavaScript.

מהו ביטוי רגולרי (רגקס)?

ביטוי רגולרי הוא רצף של תווים המגדיר דפוס חיפוש. במקרה זה, אנו רוצים למצוא דפוס המייצג כתובת אימייל חוקית.

ביטויים רגולריים הם כלי רב עוצמה וגמיש לעבודה עם מחרוזות טקסט ואימות נתוני קלט.

אימות דוא"ל עם ביטוי רגולרי

כדי לאמת שדוא"ל תקף, עלינו לוודא שהפורמט נכון, כלומר שהוא כולל @ ודומיין. לשם כך אנו משתמשים בביטוי הבא:

var regex = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)*.[a-zA-Z]{2,}$/;

דוגמה לטופס מלא

בדוגמה הבאה אנו מראים כיצד לאמת כתובת דואר אלקטרוני באמצעות JavaScript וביטוי רגולרי. השלבים שאנו עוקבים אחריהם הם:

1. אנו מגדירים פונקציה שנקראת validateMail זה לוקח כארגומנט את האימייל לאימות.
2. אנחנו יוצרים משתנה ביטוי רגולרי A המכיל את הביטוי הרגולרי כדי לאמת את המייל.
3. אנו משתמשים בשיטה מִבְחָן() של הביטוי הרגולרי כדי לבדוק אם האימייל שהוזן תואם לדפוס.
instagram story viewer
4. אם האימייל תקף, אנו מציגים הודעת התראה המציינת שהוא תקף; אחרת, אנו מציגים הודעת התראה המציינת שהיא לא חוקית.
5. ב-HTML, אנו יוצרים שדה קלט מסוג "email" וכפתור שבלחיצה עליו קורא לפונקציה validateMail עם הערך שהוזן בשדה הקלט.

function validateEmail (mail) {
// ביטוי רגולרי לאימות דוא"ל
var regex = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)*.[a-zA-Z]{2,}$/;
// בדוק אם הדואר תואם לדפוס שהוגדר על ידי הביטוי הרגולרי
if (regex.test (דואר)) {
alert("אימייל חוקי");
} אחרת {
התראה ("אימייל לא חוקי");
}
}

אימות דוא"ל עם JavaScript ו-Regex

לְאַמֵת

יתרונות וחסרונות של אימות עם JavaScript

לאימות נתוני קלט, כגון כתובות דוא"ל, באמצעות JavaScript בצד הלקוח יש יתרונות וחסרונות:

יתרונות	חסרונות
משוב מיידי למשתמש	אינו בטוח
פחות עומס על השרת	תאימות בין דפדפנים
שפר את חווית המשתמש	כפילות מאמץ (צד לקוח/שרת)
הפחתת זמן תגובה	לא מחליף אימות בצד השרת

אימות נתונים באמצעות JavaScript אינו תחליף לאימות בצד השרת. עם זאת, זה עוזר להפחית את העומס. כדי לאמת נתונים בצד השרת אני ממליץ לך לקרוא:

• אימות דואר עם PHP