قبل المناقشة العميقة للتحقق من النموذج ، دعونا نفكر في المعنى الحقيقي للتحقق من شكل النموذج. بقدر ما يتعلق الأمر بسروره ، فإن التحقق من النماذج هو نظام يكتشف بيانات التحكم غير الصالحة للمستخدمين النهائيين وتمييز هذه الأخطاء. بمعنى آخر ، فإن التحقق من النماذج هو إجراء سلسلة من عمليات التفتيش عليه قبل إرسال الخادم وإخطار المستخدمين بتصحيح أخطاءهم.
ولكن ما هو التحقق الحقيقي؟
إنه تحسين.
السبب في أن التحقق من الصيغة هو التحسين هو أنه لا يكفي لضمان أن بيانات النموذج المقدمة إلى الخادم فقط من خلال آلية التحقق من النموذج صحيحة وفعالة. من ناحية أخرى ، فإن التحقق من نموذج التصميم هو جعل تطبيقات الويب ترمي خطأ بشكل أسرع. بمعنى آخر ، من الأفضل استخدام آلية المعالجة المدمجة للمتصفح لإبلاغ صفحة الويب الخاصة بالمستخدم التي تحتوي على قيمة تحكم غير صالحة. في الماضي ، تحولت البيانات على الإنترنت فقط للسماح للخادم بإخطار المستخدم بأنه أدخل البيانات الخاطئة. إذا كان المتصفح قادرًا تمامًا على التقاطه قبل مغادرة العميل ، فيجب علينا استخدام هذه الميزة.
ومع ذلك ، فإن فحص نموذج المتصفح لا يكفي للتعامل مع جميع الأخطاء.
بعد قولي هذا ، لا يزال HTML5 يقدم ثماني طرق للتحقق من صحة البيانات للتحكم في النموذج. دعونا نلقي نظرة عليه بالترتيب ، ولكن دعونا نقدم كائن Valuestate للتعليقات للتحقق من الحالة.
في المتصفح الذي يدعم التحقق من نموذج HTML5 ، يمكنك الوصول إلى كائن ValidityState من خلال التحكم في النموذج:
var value = document.myform.myinput.validity ؛
حصل هذا السطر من الكود على كائن صحة يسمى MyInput. يحتوي الكائن على الإشارة إلى جميع حالة التحقق الثمانية ونتائج التحقق النهائية.
طريقة الاتصال على النحو التالي:
valcheck.valid
بعد التنفيذ ، سنحصل على قيمة منطقية تشير إلى ما إذا كان التحكم في النموذج قد اجتاز جميع قيود التحقق. يمكنك التعامل مع خصائص القيمة كنتيجة للتحقق النهائي: إذا تم تمرير جميع القيود الثمانية ، تكون خصائص القيمة صحيحة ، وإلا ، طالما كان هناك قيد يفشل ، فإن شعار القيمة هو كل S.
كما ذكرنا سابقًا ، هناك ثمانية قيود للتحقق المحتملة في أي عنصر شكل. كل شرط له اسم مميز مقابل في كائن ValidalState ، والذي يمكن الوصول إليه بطريقة مناسبة. دعونا نحلل واحدًا تلو الآخر لنرى كيف ترتبط بالتحكم في النموذج ، وكيفية التحقق منها بناءً على كائن الصلاحية:
1الغرض: تأكد من ملء القيمة في التحكم في النموذج.
الاستخدام: في التحكم في النموذج ، قم بتعيين الميزات المطلوبة على True.
مثال:
<نوع الإدخال = اسم النص = MyText مطلوب>
إرشادات مفصلة: إذا قام عنصر تحكم النموذج بتعيين الميزة المطلوبة ، فسيكون عنصر التحكم دائمًا غير صالح قبل أن يملأ المستخدم أو يملأ القيمة بواسطة استدعاء الرمز. على سبيل المثال ، لا يمكن لمربع إدخال النص الفارغ اجتياز الفحص المطلوب ، ما لم يكن إدخال أي نص فيه. عندما تكون قيمة الإدخال فارغة ، تُرجع Valuemissing صحيحًا.
2. Typemismatchالهدف: لضمان مطابقة قيم التحكم والأنواع المتوقعة (مثل Numbe ، البريد الإلكتروني ، URL ، إلخ).
الاستخدام: حدد القيمة المميزة للتحكم في النموذج.
مثال:
<نوع الإدخال = اسم البريد الإلكتروني = myemail>
التعليمات التفصيلية: لا يتم استخدام نوع التحكم في النموذج الخاص لتخصيص لوحة مفاتيح الهاتف المحمول. الرمز في عنوان البريد الإلكتروني ، أو قيمة الإدخال لعنصر التحكم من النوع ليس أرقامًا فعالة ، فإن المستعرض سيضع علامة على هذا التحكم للإشارة إلى أن النوع غير متطابق. بغض النظر عن الأخطاء ، سيعود Typemismatch إلى True.
3. patternmismatchالغرض: تحقق مما إذا كان الإدخال صالحًا وفقًا لقواعد التنسيق المحددة على عنصر تحكم النموذج.
الاستخدام: اضبط ميزات النمط على التحكم في النموذج ، ويعطي البئر قواعد المطابقة المناسبة.
مثال:
<type type = text name = CreditCardNumber pattern = [0-9] {16} target = '_lank'> آلية التحقق من التعبير العادية. عندما يتم ضبط ميزات النمط على عنصر التحكم ، طالما أن قيمة التحكم في الإدخال لا تفي بقواعد الوضع ، فإن PatternMismatch ستعيد القيمة الحقيقية. من مستخدمي الإرشادات والمراجع التكنولوجية ، يجب عليك تعيين خصائص العنوان في عنصر تحكم النموذج الذي يحتوي على خصائص النمط لشرح القواعد. 4. Toolong الغرض: تجنب قيمة الإدخال التي تحتوي على العديد من الأحرف.
الاستخدام: اضبط خصائص MaxLength على التحكم في النموذج.
مثال:
<نوع الإدخال = اسم النص = limiteddtext maxLength = 140>
الوصف التفصيلي: إذا تجاوز طول قيمة الإدخال MaxLength ، فسيتم إرجاع ميزة Toolong بشكل صحيح. على الرغم من أن التحكم في النموذج عادة ما يقتصر على الحد الأقصى للطول عند إدخال المستخدم ، في بعض الحالات ، مثل إعدادات البرنامج ، فإنه لا يزال يتجاوز القيمة القصوى.
5. RangeUnderflow الغرض: الحد من الحد الأدنى لقيمة التحكم العددي.
الاستخدام: اضبط ميزة MIN للتحكم في النموذج وإعطاء القيمة الدنيا المسموح بها.
مثال:
<نوع الإدخال = اسم المدى = AgeCheck Min = 18>
إرشادات مفصلة: في التحكم في النموذج الذي يجب فحصه ، من المحتمل أن تكون القيمة أقل مؤقتًا من الحد الأدنى للإعدادات. في هذا الوقت ، ستعود ميزة RangeUnderFlow لـ ValiditionState إلى True.
6. RangeOverflow الغرض: الحد من القيمة القصوى للتحكم العددي.
الاستخدام: قم بتعيين خصائص الحد الأقصى للتحكم في النموذج وإعطاء القيمة القصوى.
مثال:
<نوع الإدخال = اسم المدى = KidageCheck Max = 12>
وصف مفصل: على غرار RangeUnderflow ، إذا كانت قيمة التحكم في النماذج أكبر من الحد الأقصى ، فستسترجع الخصائص بشكل صحيح.
7 الغرض: تأكد من أن قيمة الإدخال تلتقي Min و Max والخطوة.
الاستخدام: قم بتعيين خصائص الخطوة للتحكم في النموذج ، حدد زيادة القيمة.
مثال:
<نوع الإدخال = اسم المدى = CofidenCelevel Min = 0 Max = 100 Step = 5>
وصف مفصل: يتم استخدام هذا القيد للتأكد من أن القيمة تلبي متطلبات Min و Max والخطوة. بمعنى آخر ، يجب أن تكون القيمة الحالية هي مجموع مضاعف القيمة الدنيا وقيمة ميزة الخطوة. على سبيل المثال ، من 0 إلى 100 ، تكون قيمة ميزة الخطوة هي 5 ، في هذا الوقت لن يكون هناك 17 ، وإلا فإن زوجة الأب سوف تُرجع القيمة الحقيقية.
8. Customerror الهدف: تسليم رمز التطبيق تعيين الأخطاء وحسابها بوضوح.
الاستخدام: استدعاء setCustomValidity (رسالة) لوضع أجزاء التحكم في النموذج في حالة Customerror.
مثال:
passwordConfirmativeField.setCustomValition (لا تتطابق قيم كلمة المرور.) ؛
إرشادات مفصلة: عندما لا تكون آلية التحقق من المتصفح قابلة للتطبيق ، يجب عرض معلومات خطأ التحقق المخصص. عندما لا تفي قيمة الإدخال بالقواعد الدلالية ، يجب على رمز التطبيق تعيين رسائل التحقق المخصصة هذه.
تتمثل الحالة النموذجية لرسالة التحقق المخصصة في التحقق مما إذا كانت القيم الموجودة في عنصر التحكم متسقة. على سبيل المثال ، تؤكد كلمات المرور وكلمات المرور أن قيم الخاسرين غير متطابقة. طالما تم تخصيص رسالة التحقق ، سيكون عنصر التحكم في حالة غير صالحة ، وسيعود Customerror بشكل صحيح. لإزالة الخطأ ، ما عليك سوى الاتصال بـ setCustomValidity () على عنصر التحكم.
حسنًا ، ما سبق هو 8 الطرق الأساسية التي تم التحقق منها بواسطة الجدول وحده في HTML5. آمل أيضًا أن يدعم الجميع VEVB Wulin.com.