דף הבית » עיצוב אתרים » מבוא לתוך אימות HTML5 אילוצים

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

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

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

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

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

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

    1. שימושי

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

    2. מאובטח

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

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

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

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

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

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

    אימות אימות HTML5

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

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

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

    4. דפוס עבור אימות Regex

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

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

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

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

     

    עוד כמה דברים

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

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

    אלמנט.