וולידציה לשדה טלפון – Regular expressions

וולידציה לשדה טלפון - 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>
				
			

ליצירת קשר השאירו פרטים כאן

שיתוף ב facebook
שיתוף ב twitter
שיתוף ב linkedin
שיתוף ב whatsapp