כל מפתח אתרים מכיר את התחושה: בנית טופס, ואתה פולט גניחה כשאתה מבין שעכשיו אתה צריך לאמת כל שדה.
למרבה המזל, אימות טופס לא חייב להיות כואב. אתה יכול להשתמש בביטויים רגולריים כדי לטפל בצרכי אימות נפוצים רבים.
מה הם ביטויים רגולריים?
ביטויים רגולריים מתארים דפוסים התואמים שילובים של תווים במחרוזות. אתה יכול להשתמש בהם כדי לייצג מושגים כמו "רק מספרים" או "בדיוק חמש אותיות רישיות".
ביטויים רגולריים (הנקראים גם regex) הם כלים רבי עוצמה. יש להם שימושים רבים, כולל חיפוש מתקדם, חיפוש והחלפה ופעולות אימות על מחרוזות. יישום מפורסם אחד של ביטויים רגולריים הוא פקודת grep בלינוקס.
מדוע להשתמש בביטויים רגולריים לצורך אימות?
יש הרבה דרכים לאמת קלט טופס, אבל ביטויים רגולריים הם פשוטים, מהירים ונוחים לשימוש אם אתה מבין איך.
ל-JavaScript יש תמיכה מקורית בביטויים רגולריים. המשמעות היא ששימוש בהם לצורך אימות בניגוד לספרייה חיצונית עוזר לשמור על גודל יישום האינטרנט שלך קטן ככל האפשר.
ביטויים רגולריים מסוגלים גם לאמת סוגים רבים של קלט טופס.
יסודות של ביטויים רגולריים
ביטויים רגולריים מורכבים מסמלים המתארים דפוסים שנוצרו על ידי תווים במחרוזת. ב-JavaScript, אתה יכול ליצור ביטוי רגולרי מילולי על ידי כתיבתו בין שני לוכסנים קדימה. הצורה הפשוטה ביותר של ביטוי רגולרי נראית כך:
/abc/הביטוי הרגולרי שלמעלה יתאים לכל מחרוזת הכוללת את התווים "a", "b" ו-"c" בסדר זה, ברציפות. המחרוזת "abc" תתאים לביטוי הרגולרי הזה, כמו גם מחרוזת כמו "abcdef".
אתה יכול לתאר דפוסים מתקדמים יותר על ידי שימוש בתווים מיוחדים בביטויים הרגולריים שלך. דמויות מיוחדות אינן מייצגות דמות מילולית, אבל הן הופכות את הרקס שלך לאקספרסיבי יותר.
אתה יכול להשתמש בהם כדי לציין שחלק מהדפוס צריך לחזור על עצמו מספר מסוים של פעמים, או כדי לציין שחלק מהדפוס הוא אופציונלי.
דוגמה לתו מיוחד היא "*". התו "*" משנה או תו בודד, או קבוצה של תווים, שמגיעים לפניו. הוא מצהיר שדמויות אלו עשויות להיעדר או לחזור על עצמן בכל מספר פעמים ברציפות. לדוגמה:
/abc*/
יתאים ל-"ab" ואחריו כל מספר של תווים "c". המחרוזת "ab" היא דוגמה חוקית לתבנית זו, מכיוון שהתו "c" הוא אופציונלי. המחרוזות "abc" ו-"abccccc" תקפות באותה מידה, מכיוון שה-"*" אומר ש-"c" יכול לחזור על כל מספר פעמים.
תחביר הביטוי הרגולרי המלא משתמש במספר תווי דפוס נוספים כדי לתאר התאמות אפשריות. אתה יכול ללמוד עוד Regex 101 של regexlearn.com קורס אינטראקטיבי. מדריך JavaScript של MDN הוא גם מאוד שימושי.
אימות טופס עם ביטויים רגולריים
אתה יכול להשתמש ב-Regex כדי לאמת קלט טופס בכמה דרכים. הדרך הראשונה היא להשתמש ב-JavaScript. זה כולל כמה שלבים:
- קבל את הערך של קלט הטופס.
- בדוק אם הערך של הקלט תואם לביטוי הרגולרי.
- אם לא, הצג למשתמש באתר שהערך של שדה הקלט אינו חוקי.
הנה דוגמה קצרה. בהינתן שדה קלט כזה:
<מציין מיקום קלט="שדה קלט">אתה יכול לכתוב פונקציה כדי לאמת אותה כך:
פוּנקצִיָהלְאַמֵת() {
תן ערך = מסמך.querySelector("input").value;
const regEx = /^.{3,7}$/;
לַחֲזוֹר regEx.test (ערך);
}דרך נוספת היא לנצל את יכולות אימות טופס ה-HTML של הדפדפן. אֵיך? על ידי ציון ביטוי רגיל כערך של תכונת התבנית של תג הקלט HTML.
תכונת התבנית תקפה רק עבור סוגי הקלט הבאים: טקסט, טלפון, דוא"ל, כתובת אתר, סיסמה וחיפוש.
הנה דוגמה באמצעות תכונת התבנית:
<טופס>
<מציין מיקום קלט="שדה קלט" תבנית נדרשת="/^.{3,7}$/">
<לַחְצָן>שלח</button>
</form>אם תשלח את הטופס והערך של הקלט אינו תואם לכל הביטוי הרגולרי, הטופס יציג שגיאת ברירת מחדל שנראית כך:
אם הביטוי הרגולרי שסופק לתכונת התבנית אינו חוקי, הדפדפן יתעלם מהתכונה.
דפוסי ביטוי רגולריים נפוצים עבור אימות טופס
הצורך לבנות ולבצע ניפוי באגים של regex מאפס יכול לקחת קצת זמן. להלן כמה הצהרות רגילות שבהן תוכל להשתמש כדי לאמת כמה מהסוגים הנפוצים ביותר של נתוני טופס.
ביטוי רגולרי לאימות אורך המחרוזת
אחת מדרישות האימות הנפוצות ביותר היא הגבלה על אורך המחרוזת. הביטוי הרגולרי שיתאים למחרוזת של שבעה תווים הוא:
/^.{7}$/ה "." הוא מציין מיקום שמתאים לכל תו, וה-"7" בסוגריים מסולסלים מציין את מגבלת האורך של המחרוזת. אם המחרוזת צריכה להיות בטווח מסוים של אורך, כמו בין שלוש לשבע, הביטוי הרגולרי ייראה כך במקום זאת:
/^.{3,7}$/ואם המחרוזת צריכה להיות באורך של לפחות שלושה תווים ללא גבול עליון, היא תיראה כך:
/^.{3,}$/לא סביר שאורך יהיה דרישת האימות היחידה לקלט טופס. אבל לעתים קרובות תשתמש בו כחלק מביטוי רגולרי מסובך יותר כולל תנאים אחרים.
ביטוי רגולרי לאימות שדות למכתבים בלבד
חלק מהקלטים של טופס צריכים להכיל דבר מלבד אותיות כדי להיות תקפים. הביטוי הרגולרי הבא יתאים רק למחרוזות כאלה:
/^[a-zA-Z]+$/ביטוי רגולרי זה מציין מערך תווים המורכב מכל האלפבית. התו המיוחד "+" פירושו שהתו הקודם חייב להופיע לפחות פעם אחת, ללא גבול עליון.
ביטוי רגולרי לאימות שדות מספר בלבד
הביטוי הרגולרי הבא יתאים רק למחרוזות המורכבות כולה מספרות:
/^\d+$/הביטוי הרגולרי שלמעלה זהה למעשה לביטוי הקודם. ההבדל היחיד הוא שהוא משתמש בתו מיוחד "\d" כדי לייצג את טווח הספרות, במקום לכתוב אותן.
ביטוי רגולרי לאימות שדות אלפאנומריים
ביטויים רגולריים מקלים גם על אימות שדות אלפאנומריים. הנה ביטוי רגולרי שיתאים רק למחרוזות המורכבות מאותיות וספרות:
/^[a-zA-Z\d]+$/חלק מהשדות הם אלפאנומריים, אך מאפשרים מספר תווים אחרים כמו מקפים וקווים תחתונים. דוגמה אחת לשדות כאלה היא שם משתמש. להלן ביטוי רגולרי התואם למחרוזת המורכבת מאותיות, ספרות, קווים תחתונים ומקפים:
/^(\w|-)+$/התו המיוחד "\w" מתאים למחלקה שלמה של תווים, כמו "\d". הוא מייצג את טווח האלפבית, הספרות ותו הקו התחתון ("_").
ביטוי רגיל לאימות מספרי טלפון
מספר טלפון יכול להיות שדה מסובך לאימות מכיוון שמדינות שונות משתמשות בפורמטים שונים. גישה כללית מאוד היא לוודא שהמחרוזת מכילה רק ספרות ושאורכה נמצא בטווח מסוים:
/^\d{9,15}$/גישה מתוחכמת יותר עשויה להיראות כמו זו שנלקחה ממנה MDN, אשר מאמת מספרי טלפון בפורמט ###-###-####:
/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/ביטוי רגיל לאימות תאריכים
כמו מספרי טלפון, גם לתאריכים יכולים להיות מספר פורמטים. תאריכים הם בדרך כלל פחות מסובכים לאימות מאשר מספרי טלפון. למה? תאריכים אינם מכילים תווים מלבד ספרות ומקפים.
הנה דוגמה שתאמת תאריכים בפורמט "DD-MM-YYYY".
/^\d{2}-\d{2}-\d{4}$/אימות באמצעות Regex הוא קל
ביטויים רגולריים מתארים דפוסים התואמים שילובים של תווים במחרוזות. יש להם מגוון יישומים, כגון אימות קלט משתמש מטפסי HTML.
אתה יכול להשתמש ב-Regex כדי לאמת עם JavaScript או באמצעות תכונת HTML. קל לבנות ביטויים רגולריים כדי לאמת סוגים נפוצים של קלט טופס כמו תאריכים ושמות משתמש.