אמת מספרי טלפון ב-JavaScript עם ביטויים רגילים

מבוא

בין אם אתה מבין זאת או לא, הנתונים הפכו לחלק מכריע בחיי היום-יום שלנו. מהזמנת מזון באינטרנט ועד לחיפוש מזון לחתולים, אנחנו כל הזמן שולחים ומקבלים נתונים. כמפתחים של אפליקציות אינטרנט, באחריותנו לוודא שהקלטות המשתמשים הן בפורמט שצוין כך שמסד הנתונים יבין את הנתונים כהלכה, והאפליקציה תישאר חזקה.

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

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

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

מהו ביטוי רגולרי?

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

נניח שאתה רוצה למצוא כתובת אימייל במסמך. כתובת הדוא"ל יכולה להיות כל כתובת, לא כתובת ספציפית. כתיבת ביטוי פשוט תעזור לך למצוא את התבנית במהירות מכיוון שאתה כבר יודע את המבנה של כתובת אימייל.

ביטוי רגולרי משתמש בתווים מיוחדים כדי לציין סוגים שונים של תבניות. לדוגמה:

• . (נקודה) היא תו מיוחד שיכול להתאים לכל תו.
• * (כוכבית) תואם את התו הקודם 0 פעמים או יותר.
• + (פלוס) תואם את התו הקודם פעם אחת או יותר.
• ? (סימן שאלה) הופך את התו הקודם לאופציונלי.
• [abc] מתאים לכל אחת מהדמויות a, b, או c.
• (abc) מקבץ דמויות יחד.
• ^ (קארט) תואם את תחילת הקו.
• $ (דולר) תואם לסוף השורה.

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

בואו נבנה ביטוי רגולרי שבודק אם קבוצת מספרים נתונה היא מיקוד בן חמש ספרות. כדי להתחיל לכתוב את הביטוי, נשתמש ב- ^ סימן (קארט), שכן הוא תואם את תחילת הקו. בביטוי רגיל, d מתאים לכל ספרה, ומספר בתוך סוגרים מסולסלים ({}) תואם את האלמנט הקודם בדיוק למספר הפעמים שניתן בתוך הסוגרים. מהרשימה למעלה, אנחנו יודעים את זה $ משמש להתאמת סוף השורה.

שילוב המידע הזה, נקבל ביטוי רגולרי כמו זה:

/^d{5}$/

כעת, בואו נבחן את הגרפיקה למטה כדי להבין טוב יותר את הביטוי.

ביטוי רגיל כדי להתאים למיקוד בן חמש ספרות

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

ביטויים רגולריים של JavaScript

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

ב- JavaScript, ה- RegExp האובייקט משמש להתאמת דפוסים. ניתן להשתמש באובייקט זה בשתי דרכים:

• שימוש בסימונים מילוליים, שבו תבנית מעוצבת בין שני לוכסנים קדימה
• שימוש בסימון בנאי, כאשר מחרוזת או a RegExp חפץ עובר

ניתן להשתמש בסימון מילולי בצורה פשוטה כמו זו:

const expr = /^d{5}$/i;

מצד שני, עם סימון הבנאי, תצטרך להשתמש ב- RegExp בנאי כדי ליצור מופע שלו. כך זה נראה:

const expr = new RegExp(/^d{5}$/, "i");

אתה יכול לקרוא עוד על אובייקט RegExp מה- מסמכי MDN רשמיים. כעת, בואו נחקור את החשיבות של אימות מספר טלפון ואת המרכיבים השונים של מספר טלפון.

אימות מספר טלפון ורכיבים

אימות מספרי טלפון בצד הלקוח הוא חיוני בעת שמירת מספרי טלפון במסד הנתונים שלך. ללא אימות מתאים, הקוד שלך עשוי להפגין התנהגויות בלתי צפויות.

לדוגמה, נניח שאתה משתמש בשירות הדורש את קידומת המדינה יחד עם מספר הטלפון, אך המשתמשים שלך לא כוללים אותם בגלל חוסר אימות. עכשיו, יש לך רק את המספר לְלֹא קוד המדינה, ושירות ששולח הודעות טקסט עלול להיכשל בגלל זה. זהו רק תרחיש היפותטי אחד. בעיות אחרות עלולות אפילו לקרוס את האפליקציה שלך. זה חיוני לטפל נכון בנתונים שלך ב-frontend, להבטיח שאתה שומר נתונים נקיים ועקביים בכל מסד הנתונים שלך.

בדרך כלל, מספר טלפון מורכב מארבעה חלקים:

• קידומת מדינה: 1 עד 3 הספרות הראשונות (בהתאם למדינה) מגדירות את המדינה של מספר הטלפון. קוד זה מאפשר ניתוב השיחה לארץ הנכונה. קוד מדינה לא יכול להתחיל ב-0.

המאמר שאתה עורך כרגע הוא "אמת מספרי טלפון ב-JavaScript עם ביטויים רגילים". גוש הטקסט לעריכה:

• אזור חיוג: ידוע גם בתור העיר או קידומת החיוג, חלק זה של המספר עוזר לנתב את השיחה לאזור הגיאוגרפי הנכון בתוך המדינה. במדינות מסוימות, כמו ארצות הברית, אזורי חיוג יכולים גם לציין קבוצה מסוימת של מספרי טלפון עבור שירות מסוים. בנוסף, בצפון אמריקה, קידומת חיוג אינה יכולה להתחיל ב-0 או ב-1.
• קידומת טלפון: רצף המספרים הזה מוקצה למשרד מרכזי או מרכזית טלפון ספציפית על ידי חברת הטלפון, ומצמצם עוד יותר את האזור הגיאוגרפי או השכונה הספציפיים.
• מספר קו: זהו המספר הייחודי המוקצה לקו הטלפון הספציפי עבור משק בית או עסק בתוך אזור הקידומת. חלק זה של המספר בדרך כלל מבטיח שכל מספר טלפון בתוך מדינה, אזור וקידומת הוא ייחודי.

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

כעת נעבור לכתיבת פונקציית JavaScript שמאמתת מספר טלפון על סמך קריטריונים אלו באמצעות ביטויים רגולריים.

צור RegEx עבור אימות מספר טלפון

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

COUNTRY_CODE-AREA_CODE-TELEPHONE_PREFIX-LINE_NUMBER

לדוגמה, מספר טלפון חוקי עבור הפונקציה שלנו יהיה כך +123-456-789-1234, אבל לא +012-123-456-7890 or +12-123-456-789, מכיוון שמספרי טלפון אלו אינם עומדים בכללי מספרי טלפון שדיברנו עליהם קודם לכן.

עכשיו, בואו נקפוץ לכתיבת הביטוי הרגולרי. ראשית, בואו נבדוק אם קידומת המדינה היא באורך של 1 עד 3 ספרות ואינו מתחיל באפס.

כדי לציין את תחילת הביטוי הרגולרי, השתמש בסימן (^), ולאחר מכן אמת שקיים פלוס בהתחלה. למטרה זו, בואו נשתמש +, שתתאים לכך שהפלוס קיים בהתחלה. כעת, כדי להבטיח שהספרות של קידומת המדינה הן בין ספרה אחת לשלוש והספרה הראשונה אינה אפס, נוכל לכתוב משהו כזה: [1-9]{1}[0-9]{0,2}. כאן, [1-9]{1} מציין שכל ספרה מ-1 עד 9 יכולה להתקיים בדיוק פעם אחת, ובאופן דומה, [0-9]{0,2} מציין שכל ספרה מ-0 עד 9 יכולה להתקיים אפס עד פעמיים.

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

^+[1-9]{1}[0-9]{0,2}-$

השמיים $ בסוף מציין את סוף השורה. עכשיו, עבור אזור החיוג, זה יהיה די דומה. אזור חיוג לא יכול להתחיל באפס או באחד. אז, החלק הראשון יהיה [2-9]{1}. זה תואם לכך שהמספר הראשון הוא בין 2 ל-9. התאמה זו מתרחשת פעם אחת. לאחר מכן, עבור שאר הקוד, נוכל לכתוב [0-9]{2}. זה יבטיח שיש בדיוק שתי ספרות אחרי הראשונה, ולכל ספרה, הטווח הוא בין 0 ל-9. שוב, הוסף את מפריד המקף בסוף.

כעת, הביטוי הרגולרי המלא ייראה כך:

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-$
|----Country Code---|-|---Area Code--|-|

בואו נשתמש שוב באותו דפוס לבדיקת קידומת הטלפון. נניח שגם קידומת הטלפון לא יכולה להתחיל באפס או באחד. אז, מוסיף [2-9]{1}[0-9]{2} ומקף שוב יעשה את הביטוי כך:

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-$
|----Country Code---|-|---Area Code--|-|--Tel Prefix--|-|

החלק היחיד שנותר כעת הוא מספר השורה, שיכול להיות כל ספרה באורך של ארבע בדיוק. זה יותר פשוט מהאחרים. הביטוי הוא [0-9]{4}.

הביטוי המלא הוא כדלקמן:

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-[0-9]{4}$
|----Country Code---|-|---Area Code--|-|--Tel Prefix--|-|-Line-|

בטח שמתם לב לשימוש התכוף בפלטה מתולתלת. הם משמשים כדי להתאים את המקרים המסופקים בתוך הפלטה. אם זו ספרה ספציפית, כמו {1}, זה יתאים לדפוס הקודם פעם אחת בדיוק. עם זאת, אם זה טווח, כמו {0, 2}, הוא מגדיר את המספר המינימלי והמקסימלי של התאמות. אז, במקרה של {0, 2}, הוא יתאים לתבנית לפחות אפס פעמים ומקסימום פעמיים.

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

function validatePhoneNumber(phoneNumber) { const pattern = new RegExp("^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-[0-9]{4}$"); if (pattern.test(phoneNumber)) { console.log("Phone number is valid"); return true; } else { console.log("Phone number is not valid"); return false; }
} validatePhoneNumber("+123-456-789-1234"); validatePhoneNumber("+0-123-456-7890"); validatePhoneNumber("+12-012-123-1234"); 

הפונקציה די פשוטה. זה לוקח מספר טלפון כקלט. דפוס הביטוי הרגולרי מאוחסן בתוך משתנה שנקרא pattern. התבנית מופעלת באמצעות הבנאי RegExp והעברת הביטוי כפרמטר לבנאי. לאחר מכן, אנו בודקים את מספר הטלפון באמצעות ה test שיטה זמינה באובייקט. באמצעות הצהרת if-else, אנו בודקים אם מספר הטלפון עובר את המבחן. אם כן, אנו מחזירים true ושולחים הודעת מסוף המציינת כי Phone number is valid. אחרת, הוא מחזיר false ומציג הודעת מסוף המציינת שמספר הטלפון אינו חוקי.

עם זה, אנחנו מוכנים ללכת. כעת, אתה יכול לבדוק את מספרי הטלפון שלך כדי לראות אם הם תקפים.

<br> סיכום

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

עם הבנה בסיסית של ביטויים רגולריים, כעת תוכל לחקור דפוסים נוספים. אתה יכול גם להשתמש בכלים כמו regex101 לאימות הביטויים שלך באינטרנט.

• הפצת תוכן ויחסי ציבור מופעל על ידי SEO. קבל הגברה היום.
• EVM Finance. ממשק מאוחד למימון מבוזר. גישה כאן.
• Quantum Media Group. IR/PR מוגבר. גישה כאן.
• PlatoAiStream. Web3 Data Intelligence. הידע מוגבר. גישה כאן.
• מקור: https://stackabuse.com/validate-phone-numbers-in-javascript-with-regular-expressions/