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

شكل الانترنت

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

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

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

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

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

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

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

16 تعليقات

  1. 1

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

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

  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

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

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

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

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

    • 8

      جاي،

      اسف بشأن ذلك! كانت وجهة نظري بالتأكيد عدم تقديم ملاحظات للمطورين - لقد كنت أتيت بالفعل من وجهة نظر مدير المنتج. أتفق معك - لكن من المثير للاهتمام أن بعض المطورين الآخرين لا يفعلون ذلك! أعتقد أن هذا أمر مؤسف.

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

  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

      دوه! لقد ضبطتني يا أماندا! أتمنى أن يكون لدي الوقت للقيام بشكل أفضل بالتحقق من صحة النموذج ودمجه في WordPress. أنا أحب بشكل خاص برنامج Adobe Spry إطار التحقق من الصحة وأحب أن أرى شخصًا ما يدمج الاثنين!

      شكر! (وأنا أقدر دائمًا وجود آراء متعددة حول أي موضوع).
      دوغ

ما رأيك؟

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