מבוא לתוך אימות HTML5 אילוצים

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

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

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

למה אנחנו צריכים אימות חזיתי קלט

אימות קלט יש שתי מטרות עיקריות. התוכן שאנו מקבלים צריך להיות:

1. שימושי

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

2. מאובטח

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

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

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

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

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

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

אימות אימות HTML5

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

כדי לבצע את ההערכה, האלגוריתם משתמש תכונות הקשורות לאימות של רכיבי קלט, כמו , </code>, ו <code><select></code>. אם אתה רוצה לדעת איך אימות אילוצים קורה צעד אחר צעד בדפדפן לבדוק את זה WhatWG דוק.</p> <p>הודות לתכונת האימות של HTML5, אנו יכולים לבצע הכל <strong>משימות אימות סטנדרטי קלט</strong> בצד הלקוח <strong>ללא JavaScript, אך ורק עם HTML5</strong>.</p> <p>כדי לבצע משימות מורכבות יותר הקשורות לאימות, HTML5 מספק לנו <strong>הגבלת אימות</strong> אנו יכולים להשתמש כדי להגדיר סקריפטים אימות מותאם אישית שלנו.</p> <h4>אמת עם סוגי קלט סמנטי</h4> <p>HTML5 הציגה <strong>סוגי קלט סמנטיים</strong> כי - מלבד מציין את המשמעות של אלמנט עבור סוכני משתמש - יכול לשמש גם <strong>לאמת קלט משתמש</strong> על ידי הגבלת משתמשים לתבנית קלט מסוימת.</p> <p>מלבד סוגי הקלט שכבר קיימים לפני HTML5 (<code>טקסט</code>, <code>סיסמה</code>, <code>שלח</code>, <code>לאפס</code>, <code>רדיו</code>, <code>תיבת סימון</code>, <code>כפתור</code>, <code>מוסתר</code>), אנחנו יכולים גם להשתמש הבאות <strong>HTML5 סמנטי קלט סוגי</strong>You <code>דוא"ל</code>,<code>טל</code>,<code>כתובת אתר</code>,<code>מספר</code>,<code>זמן</code>,<code>אשר</code>,<code>תאריך שעה</code>,<code>datetime-local</code>, <code>חודש</code>,<code>שבוע</code>, <code>טווח</code>, <code>לחפש</code>,<code>צבע</code>.</p> <p>אנו יכולים להשתמש בבטחה בקודים מסוג HTML5 עם דפדפנים ישנים יותר, שכן הם יפעלו כ <code><input type="text"></code> שדה בדפדפנים שאינם תומכים בהם.</p> <p>בוא נראה מה קורה כאשר המשתמש מזין סוג קלט שגוי. נניח שיצרנו שדה קלט דוא"ל עם הקוד הבא:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">האימייל שלך:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>כאשר המשתמש מקליד מחרוזת שאינה משתמשת בתבנית דוא"ל, אלגוריתם אימות האילוצים <strong>אינו מגיש את הטופס</strong>, ו <strong>מחזירה הודעת שגיאה</strong>You</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>אותו כלל חל גם על סוגי קלט אחרים, לדוגמה <code>type = "url"</code> משתמשים יכולים לשלוח קלט רק אחרי הפורמט של כתובת האתר (מתחיל בפרוטוקול, כגון <code>http: //</code> או <code>ftp: //</code>).</p> <p>סוגי קלט מסוימים משתמשים בעיצוב זה <strong>אפילו לא מאפשר למשתמשים להזין פורמט קלט שגוי</strong>, לדוגמה <code>צבע</code> ו <code>טווח</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">צבע רקע:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>אם נשתמש <code>צבע</code> סוג קלט המשתמש הוא מוגבל או לבחור צבע מתוך בורר הצבע או להישאר עם ברירת המחדל שחור. שדה הקלט הוא <strong>מוגבל על ידי עיצוב</strong>, ולכן זה לא משאיר הרבה סיכוי עבור שגיאת המשתמש.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>כאשר זה מתאים, כדאי לשקול להשתמש <code><select></code> תג HTML שעובד באופן דומה לסוגי הקלט המוגבלים לפי העיצוב; הוא מאפשר למשתמשים לבחור מתוך רשימה נפתחת.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">הפרי האהוב עליך:</label> <select name="fruit"> <option value="apple">תפוח עץ</option> <option value="pear">אגס</option> <option value="orange">תפוז</option> <option value="raspberry">פטל</option> </select> <input type="submit" value="Submit"> </form> </pre> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_3.jpg"></figure><h4>השתמש במאפיינים של אימות HTML5</h4> <p>שימוש בסוגי קלט סמנטיים קובע מגבלות מסוימות על מה שהמשתמשים מורשים לשלוח, אך במקרים רבים אנחנו רוצים להמשיך הלאה. זה הזמן שבו <strong>תכונות הקשורות לאימות</strong> של ה <code><input></code> תג יכול לעזור לנו.</p> <p>תכונות הקשורות לאימות שייכות לסוגים מסוימים של קלט (לא ניתן להשתמש בהם <em>את כל</em> טיפוסים) עליהם הם מטילים מגבלות נוספות.</p> <h5>1. <code>נדרש</code> לקבלת קלט חוקי בכל האמצעים</h5> <p>ה <code>נדרש</code> התכונה היא התכונה הידועה ביותר של אימות HTML. זה <strong>תכונה בוליאנית</strong> כלומר <strong>אינו לוקח כל ערך</strong>, אנחנו פשוט צריכים לשים אותו בתוך <code><input></code> אם ברצוננו להשתמש בה:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>אם המשתמש שוכח להזין ערך בשדה קלט נדרש, הדפדפן <strong>מחזירה הודעת שגיאה</strong> זה מזהיר אותם למלא את השדה, והם <strong>לא יכול להגיש את הטופס</strong> עד שהם סיפקו קלט חוקי. לכן חשוב תמיד <strong>סמן ויזואלית</strong> שדות חובה למשתמשים.</p> <p>ה <code>נדרש</code> התכונה יכולה להיות <strong>יחד עם סוגי הקלט הבאים</strong>You <code>טקסט</code>, <code>לחפש</code>, <code>כתובת אתר</code>, <code>טל</code>, <code>דוא"ל</code>, <code>סיסמה</code>, <code>אשר</code>, <code>תאריך שעה</code>, <code>datetime-local</code>, <code>חודש</code>, <code>שבוע</code>,<code>זמן</code>, <code>מספר</code>, <code>תיבת סימון</code>, <code>רדיו</code>, <code>קובץ</code>, בתוספת <code><textarea></code>ו <code><select></code> תגי HTML.</p> <h5>2. <code>דקות</code>, <code>מקסימום</code> ו <code>שלב</code> עבור אימות מספר</h5> <p>ה <code>דקות</code>, <code>מקסימום</code> ו <code>שלב</code> תכונות מאפשרות לנו <strong>לשים אילוצים על מספר שדות קלט</strong>. הם יכולים לשמש יחד עם <code>טווח</code>, <code>מספר</code>, <code>אשר</code>, <code>חודש</code>, <code>שבוע</code>, <code>תאריך שעה</code>, <code>datetime-local</code>, ו <code>זמן</code> סוגי קלט.</p> <p>ה <code>דקות</code> ו <code>מקסימום</code> תכונות לספק דרך מצוינת בקלות <strong>לא לכלול נתונים בלתי סבירים</strong>. לדוגמה, הדוגמה הבאה מאלצת משתמשים לשלוח גיל בין 18 ל -120.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">הגיל שלך:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>כאשר אלגוריתם אימות האילוצים מכה לתוך קלט משתמש קטן יותר <code>דקות</code>, או גדול מ <code>מקסימום</code> ערך, הוא מונע ממנו להגיע backend, ומחזירה הודעת שגיאה.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>ה <code>שלב</code> תכונה <strong>מציין מרווח מספרי</strong> בין הערכים המשפטיים של שדה קלט מספרי. לדוגמה, אם אנחנו רוצים משתמשים לבחור רק מ שנים מעוברת אנו יכולים להוסיף את <code>שלב = "4"</code> תכונה לשדה. בדוגמה הבאה השתמשתי <code>מספר</code> סוג קלט, כמו שאין <code>type = "year"</code> ב- HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">הקפיצה המועדפת שלך שנה:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>עם אילוצים שנקבעו מראש, משתמשים יכולים לבחור בין שנים מעוברות בין 1972 ל -2016, אם הם משתמשים בחץ למעלה שמגיע עם <code>מספר</code> סוג קלט. הם יכולים גם להקליד ערך באופן ידני לשדה הקלט, אך במקרה שהוא אינו עומד במגבלות, הדפדפן יחזיר הודעת שגיאה.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>אורך מקסימלי</code> עבור אימות אורך טקסט</h5> <p>ה <code>אורך מקסימלי</code> התכונה מאפשרת <strong>הגדר אורך תווים מרבי</strong> עבור שדות קלט טקסטואלי. זה יכול לשמש יחד עם <code>טקסט</code>, <code>לחפש</code>, <code>כתובת אתר</code>, <code>טל</code>, <code>דוא"ל</code> ו <code>סיסמה</code> סוגי קלט, ועם <code><textarea></code> תג HTML.</p> <p>ה <code>אורך מקסימלי</code> התכונה יכולה להיות פתרון מצוין לשדות של מספרי טלפון שאינם יכולים לכלול יותר ממספר מסוים של תווים, או לטופסי יצירת קשר שבהם איננו רוצים שמשתמשים יכתבו יותר מאורך מסוים.</p> <p>קטע הקוד להלן מציג דוגמה עבור האחרון, הוא מגביל הודעות משתמשים ל -500 תווים. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">הודעה (מקסימום 500 תווים):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

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

 
 * הסיסמה שלך: