אימות נתונים בשדות קלט

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

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

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

הגדרת שדות חובה

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

דוגמת קוד להגדרת שדה חובה בטופס באמצעות המאפיין required

<form>
  <input type="text" required name="field1"/>
</form>

הגדרת אורך שדה מרבי

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

הגדרת אורך שדה מרבי בעזרת המאפיין maxlength

<input type="text maxlength=20 name="field1" />

<textarea maxlength=25></textarea>

בדוגמה שלמעלה הגדרנו שני שדות: האחד מסוג input ואילו השני מסוג textarea. לכל משדות אלה הגדרנו אורך מרבי שונה. חשוב להדגיש כי לא כל הדפדפנים תומכים בתכונה זו באותו האופן ולכן לפני השימוש בה מומלץ לבחון אותה בדפדפנים שונים.

הגדרת ערכי מינימום ומקסימום לשדות מספריים

שפת HTML5 מאפשרת לנו להגדיר עבור שדות מספריים ערך מינימלי או ערך מקסימלי או את שניהם גם יחד. עובדה זו למשל מאפשרת לנו להגדיר שדה שיכול לקבל ערכים הנעים בין 1 ל - 100.

דוגמאות קוד להגדרת ערכי מינימום ומקסימום לשדות מספריים

<!-- בשדה זה ניתן לקלוט ערך מינימלי של 1 ולא פחות מכך  -->
<input type="number" min=1>

<!-- בשדה זה ניתן לקלוט ערך מקסימלי של 100 ולא יותר מכך  -->
<input type="number" max=100>

<!-- בשדה זה ניתן לקלוט ערכים הנעים בין אחת למאה  -->
<input type="number" min=1 max=100>

חשוב: המאפיינים min ו - max תקפים רק לגבי שדות מסוג number.

שימוש ב - Regular Expressions כדי לאמת נתוני קלט

Regular Expressions הינם כלים רבי עוצמה שבעזרתם ניתן להגדיר תבניות שמולן נוכל לבדוק ולבחון כל ביטוי אלפא נומרי. HTML5 מאפשרת לעשות שימוש ב - Regular Expressions ככלים לאימות נתונים בשדות קלט וזאת באמצעות המאפיין pattern.

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

בדוגמת הקוד הבאה אראה כיצד ניתן להשתמש במאפיין pattern כדי להגביל את המשתמש להזנת מספר IP חוקי בלבד:

<input type="text" name="field1" pattern="(\[0-9]{1,3})\.(\[0-9]{1,3})\.(\[0-9]{1,3})\.(\[0-9]{1,3})">

חשוב: כבכל שדה הדורש ולידציה חובה להגדיר name לשדות העושים שימוש במאפיין pattern.

דוגמה לשדה המגביל משתמש להזנת תווים אנגליים ומספרים בלבד

<input type="text" name="field1" pattern="[a-zA-Z0-9]+">

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

<input type="text" name="field2" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$">

כלים ומאמרים בנושא

מבוא לטפסים ב - HTML5

שדות הקלט החדשים ב - HTML5

מחולל קוד Textarea

מדריך לתג form


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | מדיניות שימוש