הרשים את מבקרי האינטרנט שלך באמצעות אימות טפסים בזמן אמת

טופס מקוון

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

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

הנה כמה דוגמאות:

  1. כתובות דוא"ל - לא אכפת לי טפסים שגורמים לך למלא את כתובת הדואר האלקטרוני שלך פעמיים כדי לאמת אותם, אבל העובדה שהם לא אומרים לך אם הם תואמים או לא בנויים כראוי אינה ניתנת לנימוק.
  2. סיסמאות - אם תגרום לי להקליד סיסמה פעמיים, אנא ודא שהערכים זהים לפני פרסום הטופס.
  3. חוזק סיסמה - אם אתה זקוק לעוצמת סיסמה מסוימת (שילוב של תווים או מקרים אלפא-נומריים), ספק לי משוב בזמן שאני מקליד את הסיסמה שלי. אל תחכה שאשלח לפני שאגיד לי שהיא נכשלה.
  4. תאריכים - אם תרצה את התאריך בפורמט am / d / yyyy, הרשה לי להזין את המידע בשדה יחיד על ידי הקלדת ערכים אלה ועיצובם כראוי. אם אתה רוצה אפסים מובילים, הכנס אותם אחרי. זה בסדר להציג פורמט אחד ולשמור פורמט אחר במסד הנתונים שלך.
  5. התאריך של היום - מלא את זה בשבילי! למה אתה מבקש ממני למלא את התאריך כשאתה כבר יודע את זה ?!
  6. פורמט תאריך - אם יש לך יישום בינלאומי, אתה יכול כברירת מחדל לתבנית תאריך המבוססת על בינאום של היישום שלך. כמובן, טוב שיש אפשרות למשתמשים לעקוף אפשרות זו ולבחור בעצמם.
  7. מספרי ביטוח לאומי - זה די פשוט להוסיף איזה ג'אווה סקריפט שמקפץ אוטומטית משדה לשדה או מכניס מקף בין ערכים לתכנית.
  8. מספרי טלפון אם לוקחים בחשבון את הבינלאומיות, ניתן לפשט סוגים אלה של שדות אלה על ידי עיצוב מספר הטלפון בממשק, אך שמירתו בפורמט אחר היעיל עבור ה- back-end שלך. אל תגרום למשתמשים להקליד סוגריים, רווחים ומקפים.
  9. אורך טקסט מרבי - אם אתה מגביל את מספר התווים המאוחסנים במסד הנתונים שלך, אל תיתן לי להקליד כל כך הרבה תווים! זה אפילו לא דורש אימות קשה ... זו רק הגדרה בתיבת הטקסט.
  10. אורך טקסט מינימלי - אם אתה זקוק לאורך טקסט מינימלי, השמע אזעקה עד שיש לי מספיק תווים.

הנה דוגמה לפונקציה של עוצמת סיסמה מ חוכמת חנון:

הקלד את הסיסמה:

עדכון: 10/26/2007 - מצאתי משאב מסודר עם ספריית JavaScript זמינה להורדה אימות טפסים, הנקרא LiveValidation.

תגובות 16

  1. 1

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

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

  2. 2

    בודק הסיסמאות שבור יחסית. כל סיסמה טובה מספיק אם היא ארוכה.

    דוגמא:

    האם זו באמת סיסמה בינונית?

    f46dffe6ff4ffgdfgfjfgyu656hfdt74tyhdtu5674yfgh6uhhye45herdhrt64684hythdfth54y54348fgdcvzse8cn984v3p4m6vq98476m3wuw89ewfucsd8fg67s4v8tw76u340m6tver7nt+s89346vs+0em9u+s+09hrtuhss586ysvne4896vb4865tbv089rt++

  3. 4

    מבחינתי אימות הטופס הטוב ביותר הוא כאשר אתה נותן למשתמש את הרושם של אימות בצד הלקוח בזמן שהוא אימות בצד AJAX / שרת.
    אתה פשוט צריך לצרף לאלמנטים הטופס שלך טיפול כלשהו באירועים (הקשה, טשטוש, לחיצה וכו ') שמפרסמים את הטופס כולו דרך AJAX לשרת, ומפעילים פונקציית "סימון" שמחזירה את הודעות השגיאה המתאימות (passowrd זה גם פשוט, תאריך זה הוא בפורמט שגוי וכו '...)
    כאשר המשתמש מפרסם לבסוף את הטופס על ידי לחיצה על כפתור הגשה, עדיין תוכל להשתמש בפונקציה "בדוק" בצד השרת כדי לאמת את הטופס בפעם האחרונה לפני הכנסת הנתונים למסד נתונים או לתהליך אחר.
    בדרך זו, משתמשים מרוצים מהאימות המופעל על ידי מפתחים ומפתחים מאושרים מהתפתחות אימות בצד השרת בלבד.

    • 5
      • 6

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

        עם זאת, אני גם מסכים עם ניקולה לגבי השימוש בהיגיון של שרת השרת בשילוב עם AJAX.

  4. 7

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

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

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

    מתכנתי רשת אמיתיים יודעים זאת כבר ועושים זאת.

    • 8

      עוֹרְבָנִי,

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

      תודה שלקחת את הזמן!
      דאג

  5. 9

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

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

    כתבתי פוסט על האופן בו אני משתמש ב- InputVerifiers באפליקציות הנדנדה שלי, ומראה כיצד אני מאמת שדה טקסט בדוא"ל. ניתן לשנות בקלות את הביטוי הרגיל בו אני משתמש כדי לאמת מספרי טלפון, מיקודים, SSN וכו '.

    פוסט הבלוג שלי נמצא ב http://timarcher.com/?q=node/36

    כתוב טוב דאג!

  6. 10

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

  7. 11

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

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

    אימות חוזק הסיסמה של Geek Wisdom מ- consider tZhKwnUmIss להיות סיסמה חלשה. לא רק שזו סיסמה חזקה לחלוטין אלא שהיא גם תרחיק משתמשים כי היא נותנת להם רושם מוטעה כי כניסה לאתר שלך באמצעות סיסמה זו תהיה איכשהו חסרת ביטחון.

    זה יהיה הרבה יותר טוב (וקל יותר) פשוט לרמוז למשתמשים שסיסמה טובה אורכה לפחות שש תווים ועליה להכיל גם מספרים וגם אותיות.

    אימותים מפוקפקים אחרים כוללים שמות משתמשים הזקוקים לאורך מינימלי מסוים או שאינם מכילים רווחים. מה לא בסדר בשמות המשתמש X, פלוני אלמוני, או אפילו # *! §? אני יכול להתמודד עם זה.

  8. 12

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

  9. 13
  10. 14
  11. 15

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

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

    פוסט טוב, אגב, גם אם אני לא בהכרח מסכים עם כל מה שכתבת.

    • 16

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

      תודה! (ואני תמיד מעריך שיש דעות מרובות בכל נושא שהוא).
      דאג

מה אתה חושב?

אתר זה משתמש Akismet כדי להפחית דואר זבל. למד כיצד הנתונים שלך מעובדים.