قم بإعجاب زوار الويب لديك من خلال التحقق من صحة النموذج في الوقت الفعلي

شكل الانترنت

يكون الانطباع الأول الذي لديك عادة كمستخدم لتطبيق ويب هو عندما تملأ نموذج ويب. إنني مندهش من عدد نماذج الويب التي لا تحتوي على أي تحقق من الصحة أو تنتظر منك إرسال محتويات النموذج قبل إخبارك بالمشكلات التي قد تواجهها.

قاعدتي الأساسية هي أن أي شيء لم يتم التحقق من صحته يتم دعمه. أي شيء يمكن التحقق من صحته قبل إرسال النموذج يجب أن يكون كذلك. مع ظهور Ajax ، يمكنك حتى التحقق من صحة البيانات مقابل قاعدة البيانات الخاصة بك قبل إرسالها. لا تختر الطريق البطيء - المستخدمون يقدرون المساعدة!

وهنا بعض الأمثلة:

  1. عناوين البريد الإلكتروني - لا أمانع النماذج التي تجعلك تملأ عنوان بريدك الإلكتروني مرتين للتحقق من صحتها ، ولكن حقيقة أنها لا تخبرك بما إذا كانت متطابقة أم لا أو تم إنشاؤها بشكل مناسب أمر لا يمكن تبريره.
  2. كلمات السر - إذا كنت ستجبرني على كتابة كلمة المرور مرتين ، فيرجى التحقق من أن القيم هي نفسها قبل نشر النموذج.
  3. قوة كلمة المرور - إذا كنت بحاجة إلى قوة كلمة مرور معينة (مجموعة من الأحرف الأبجدية الرقمية أو الحالات) ، فقم بتقديم بعض التعليقات لي أثناء كتابة كلمة المرور الخاصة بي. لا تنتظر حتى أرسلها قبل إخباري بفشلها.
  4. تمور - إذا كنت ترغب في الحصول على التاريخ بتنسيق am / d / yyyy ، فاسمح لي بإدخال المعلومات في حقل واحد عن طريق كتابة هذه القيم وتنسيقها بشكل مناسب. إذا كنت تريد الأصفار البادئة ، فضعها بعد ذلك. لا بأس في عرض تنسيق واحد وحفظ تنسيق آخر في قاعدة البيانات الخاصة بك.
  5. تاريخ اليوم - املأها لي! لماذا تطلب مني ملء التاريخ وأنت تعرفه بالفعل ؟!
  6. تنسيق التاريخ - إذا كان لديك طلب دولي ، فيمكنك افتراضيًا تنسيق تاريخ بناءً على تدويل التطبيق الخاص بك. بالطبع ، من الجيد أن يكون لديك خيار للمستخدمين لتجاوز هذا الخيار وتحديد الخيار الخاص بهم.
  7. أرقام الضمان الاجتماعي - من السهل جدًا إضافة بعض جافا سكريبت التي تنتقل تلقائيًا من حقل إلى آخر أو تضع برمجيًا شرطة بين القيم.
  8. أرقام الهاتف - مع أخذ التدويل في الاعتبار ، يمكن أيضًا تبسيط هذه الأنواع من الحقول من خلال تنسيق رقم الهاتف في الواجهة ، ولكن حفظه بتنسيق آخر يكون فعالاً للواجهة الخلفية. لا تجعل المستخدمين يكتبون بين قوسين ومسافات وشرطات.
  9. الحد الأقصى لطول النص - إذا قمت بتحديد عدد الأحرف المخزنة في قاعدة البيانات الخاصة بك ، فلا تسمح لي بكتابة هذا العدد الكبير من الأحرف! لا يتطلب الأمر حتى تحققًا صعبًا من الصحة ... إنه مجرد إعداد في مربع النص.
  10. الحد الأدنى لطول النص - إذا كنت تطلب حدًا أدنى لطول النص ، فقم بإصدار صوت التنبيه حتى أحصل على أحرف كافية.

فيما يلي مثال على وظيفة قوة كلمة المرور من الحكمة المهوس:

اكتب كلمة المرور:

تحديث: 10/26/2007 - لقد وجدت موردًا أنيقًا به مكتبة JavaScript متاحة للتنزيل لـ التحقق من صحة النموذج ، يسمى LiveValidation.

16 تعليقات

  1. 1

    I agree those are great features for forms, but saying that it is “inexcusable” to not do perform front end javascript validation is a more of an personal opinion. I love working in javascript, and have written some pretty neat editmasks to do some of the things you talk about, but a lot of them are far from trivial, and many of the javascript form validation packages out there have a number of big holes. Not everyone will invest the time into duplicating their back end validation with (more often than not) more complex front end javascript validation.

    نقاط جيدة ، لكنها بالتأكيد ليست شيئًا "يحتاجه" كل نموذج عبر الإنترنت في رأيي.

  2. 2

    مدقق كلمة المرور معطل نسبيًا. أي كلمة مرور جيدة بما يكفي إذا كانت طويلة.

    على سبيل المثال:

    هل هذه حقا كلمة مرور متواضعة؟

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

  3. 4

    بالنسبة لي ، فإن أفضل طريقة للتحقق من صحة النموذج هي عندما تعطي انطباعًا عن التحقق من جانب العميل أثناء التحقق من جانب AJAX / الخادم.
    عليك ببساطة أن ترفق بعناصر النموذج بعض معالجة الأحداث (keyup ، blur ، click ، ​​إلخ ...) التي تنشر النموذج بالكامل عبر AJAX إلى الخادم ، وتستدعي وظيفة "check" التي تعرض رسائل الخطأ المقابلة (كلمة المرور هذه أيضًا بسيط ، هذا التاريخ بتنسيق خاطئ ، إلخ ...)
    عندما ينشر المستخدم النموذج أخيرًا بالنقر فوق زر إرسال ، لا يزال بإمكانك استخدام وظيفة جانب الخادم "check" للتحقق من صحة النموذج للمرة الأخيرة قبل إدخال البيانات في قاعدة بيانات أو في عملية أخرى.
    وبهذه الطريقة ، يكون المستخدمون سعداء بالتحقُّق الداخلي ، كما أن المطوِّرين سعداء بتطوير التحقق من جانب الخادم فقط.

    • 5
      • 6

        ليس سريعًا دوغ - أتفق مع فرضيتك الأصلية بأن هذه الميزات المفيدة ، مثل تنسيق SSN أثناء التنقل ، تافهة. ومن الكسول مجرد نشر رسالة تفيد بأنها خاطئة ، عندما يمكنك إصلاحها دون الحاجة إلى تخمين التنسيق.

        ومع ذلك ، أتفق أيضًا مع Nicolas حول استخدام منطق Server Side بالتزامن مع AJAX.

  4. 7

    عنوانك يقول "اعجب بأصدقائك ..." لكنك فشلت في إثارة إعجابي بهذه الدقيقتين ، التي تم الاتصال بها في البريد.

    أعد كتابة العنوان (مضلل للغاية ، يجعل المرء يعتقد أن هناك أمثلة وممارسات قيد المناقشة).

    If people are not doing this already in their forms, then they are just learning or the form is not important enough to use validation.

    يعرف مبرمجو الويب الحقيقيون هذا بالفعل ويفعلونه.

    • 8

      جاي،

      Sorry about that! My point was definitely not to provide developer feedback – I really was coming from the point of view of a Product Manager. I agree with you – but it’s interesting that some other developers don’t! I think that’s unfortunate.

      شكرا لأخذ الوقت!
      دوغ

  5. 9

    أوافق تمامًا على أن التحقق من الصحة مكون ضروري لأي تطبيق. بصفتي قائد فريق ، أجد نفسي عادةً أرسل الرمز مرة أخرى ليتم "الانتهاء منه" لأسباب مثل عدم التحقق من الصحة أو تقييد أطوال إدخال النص.

    بالنسبة لمعظم الأشياء التي أعمل عليها ، أجد أن الأمر يستغرق حوالي 50 ٪ من الوقت للحصول على شيء ما ، في ظل الظروف العادية وإذا كان المستخدمون يستخدمون النظام بالطريقة التي كنت أقصدها. تأتي نسبة 50٪ الأخرى من وقت التطوير من التحقق من المدخلات الخاصة بهم ، والتأكد من الحفاظ على سلامة البيانات ، وجعل حقول النموذج لا تسمح بإدخال البيانات الضارة.

    لقد كتبت منشورًا عن كيفية استخدامي InputVerifiers في تطبيقات hava swing الخاصة بي ، وأظهر كيف يمكنني التحقق من حقل نصي للبريد الإلكتروني. إن التعبير العادي الذي أستخدمه قابل للتعديل بسهولة للتحقق من صحة أرقام الهواتف والرموز البريدية وأرقام التأمين الاجتماعي وما إلى ذلك.

    منشور مدونتي هو في http://timarcher.com/?q=node/36

    حسن الكتابة دوغ!

  6. 10

    أنا موافق. كلمات المرور مهمة حقًا ويجب أخذها على محمل الجد. أعتقد أنه من الطبيعي أن تقوم جميع النماذج تقريبًا بكتابة كلمة المرور مرتين ، ولكن عدم إظهار صلاحية كلمتَي المرور يُظهر أنه لا يتم النظر فيها بجدية.

  7. 11

    أوافق على أن التحقق من صحة العميل يمكن أن يكون ميزة سهلة الاستخدام للغاية. ومع ذلك ، فمن المهم التأكد من أن عمليات التحقق نفسها منطقية بالفعل.

    لقد قدمت مثالاً رائعًا عن كيف يمكن أن يؤدي التحقق من الصحة إلى تضليل المستخدمين ، والأسوأ من ذلك ، إبعادهم عن موقعنا:

    التحقق من قوة كلمة مرور Geek Wisdom من يعتبر tZhKwnUmIss لتكون كلمة مرور ضعيفة. إنها ليست كلمة مرور قوية تمامًا فحسب ، بل إنها ستبعد المستخدمين أيضًا لأنها تعطيهم انطباعًا خاطئًا بأن تسجيل الدخول إلى موقعك باستخدام كلمة المرور هذه سيكون غير آمن إلى حد ما.

    سيكون من الأفضل (والأسهل) ببساطة تلميح المستخدمين إلى أن كلمة المرور الجيدة تتكون من ستة أحرف على الأقل ويجب أن تحتوي على أرقام وحروف.

    تتضمن عمليات التحقق الأخرى المشكوك فيها أسماء المستخدمين التي تحتاج إلى حد أدنى معين للطول أو قد لا تحتوي على مسافات. ما هو الخطأ في أسماء المستخدمين X, فلان الفلاني، او حتى # *! §؟ يمكنني التعامل مع ذلك.

  8. 12

    أنا أتفق معك. تبدو بعض النماذج جيدة ، لكنها لا تقدم تحققًا جيدًا من الصحة. يتم تقديم المعلومات الشخصية ومن المناسب التعامل معها على محمل الجد فقط مثل أي نماذج عمل في نسخة ورقية.

  9. 13

    نعم ، جئت إلى هنا على أمل الحصول على بعض الأمثلة على التعليمات البرمجية. يرجى إعادة تسمية موضوع هذا النشر.

  10. 14
  11. 15

    أجد أنه من الممتع بعض الشيء أن تنشره عن الخير لتوفير التحقق من صحة النموذج في الوقت الفعلي ، ومع ذلك ، فإن نموذج التعليق الخاص بك في أسفل المنشور لا يوفر أيًا من هذه ...

    أدرك أنك تستخدم WordPress لتدوين أفكارك على الإنترنت ، ولكن ربما لا يكون ضمان ممارسة ما تعظ به فكرة سيئة أيضًا. 🙂

    بالمناسبة ، منشور جيد ، حتى لو لم أتفق بالضرورة مع كل ما كتبته.

    • 16

      Doh! You busted me, Amanda! I do wish I had time to do better form validation and to integrate it into WordPress. I especially like the برنامج Adobe Spry إطار التحقق من الصحة وأحب أن أرى شخصًا ما يدمج الاثنين!

      Thanks! (And I always appreciate that there are multiple opinions on any topic).
      دوغ

ما رأيك؟

يستخدم هذا الموقع نظام Akismet لتقليل الرسائل الضارة. تعرف كيف تتم معالجة بيانات تعليقك.