וולידציה לשדה טלפון - Regular expressions
במדריך זה נראה כיצד ניתן להגביל את הגולש להזין בשדה מספר טלפון בפורמט תקין בלבד באמצעות ביטוי רגולרי Regular expressions
בדוגמא הזאת אנחנו רוצים להגדיר ששדה טלפון יעבוד רק למספר טלפון ישראלי תקני כמו:
031234567 או 0501234567
לעומת זאת מספר טלפון כמו:
05012345678 או 12345
הטופס לא ישלח והגולש יקבל שגיאה שמספר הטלפון לא תקין. לדוגמא ניתן לבדוק את זה בטופס הבא:
ראשית, ניצור תגית עם id עבור השגיאה שתוצג למשתמש שמזין מספר טלפון לא תקין ונגדיר משתנה הקובע את הביטוי הרגולרי המגדיר את התנאים של התווים ששדה טלפון צריך להכיל.
<p id="errorRegex"></p>
<script>
let regularExp = /^([0]\d{1,3}[-])?\d{7,10}$/
</script>
עכשיו נגדיר משתנה לשדה טלפון, לתגית שיצרנו עבור השגיאה וכן לכפתור שליחת הטופס.
<p id="errorRegex"></p>
<script>
let regularExp = /^([0]\d{1,3}[-])?\d{7,10}$/
let phoneRegex = document.getElementById("form-field-phoneRegex")
let errorRegex = document.getElementById("errorRegex")
let button = document.getElementById("formButton")
</script>
נכתוב פונקציה שבלחיצה על כפתור שליחה בודקת באמצעות המתודה ()test האם מתקיים התנאים שהגדרנו במשתנה של Regular expressions
אם התנאי לא מתקיים נציג שגיאה.
בגלל שאנחנו רוצים למנוע את שליחת הטופס במידה והטלפון לא תקין חשוב להוסיף לפונקציה את המתודה preventDefault שמבטלת את פעולת ברירת המחדל של הטופס שזה “שליחה”, אחרת השגיאה תוצג אבל הטופס ישלח בכל זאת…
<p id="errorRegex"></p>
<script>
let regularExp = /^([0]\d{1,3}[-])?\d{7,10}$/
let phoneRegex = document.getElementById("form-field-phoneRegex")
let errorRegex = document.getElementById("errorRegex")
let button = document.getElementById("formButton")
button.addEventListener("click", function checkPhone(e){
let result = regularExp.test(phoneRegex.value)
if(result===false){
e.preventDefault()
errorRegex.innerText = "מספר הטלפון אינו תקין"
}else{
errorRegex.innerText = ""
}
})
</script>
ניתן לשכלל את הוולידציה למספר טלפון ישראלי מסוגים שונים:
/^(0(?:[23489]|5[0-689]|7[2346789])(?![01])(\d{7}))|(1(?:[7-9])00(\d{6}))|(1599(\d{6}))$/
או למספר סלולארי בלבד:
^[0][5][0|2|3|4|5|9]{1}[-]{0,1}[0-9]{7}$