تعليمات التحقق من النماذج الشائعة
1. التحقق المطلوب
ما إذا كان قد تم ملء إدخال النموذج ، فقط أضف علامة HTML5 المطلوبة لعنصر حقل الإدخال:
انسخ الرمز كما يلي: <إدخال نوع = "نص" مطلوب />
2. الحد الأدنى الطول
تحقق من أن طول نص إدخال النموذج أكبر من قيمة الحد الأدنى المحد ، واستخدم التعليمات ng-minleng = "{number}" في حقل الإدخال:
انسخ الرمز كما يلي: <input type = "text" ng-minlength = "5" />
3. الحد الأقصى الطول
تحقق من أن طول نص إدخال النموذج أقل من أو يساوي قيمة أقصى معينة ، واستخدم التعليمات ng-maxlength = "{number}" في حقل الإدخال:
انسخ الرمز كما يلي: <إدخال type = "text" ng-maxlength = "20" />
4. مطابقة نمط
استخدم ng-pattern = "/pattern/" للتأكد من أن الإدخال يطابق التعبير العادي المحدد:
انسخ رمز الرمز على النحو التالي: <إدخال type = "text" ng-pattern = "/[a-za-z]/"/>
5. البريد الإلكتروني
تحقق من أن محتوى الإدخال هو بريد إلكتروني ، فقط قم بتعيين نوع الإدخال للبريد الإلكتروني كما يلي:
انسخ الرمز كما يلي: <إدخال type = "البريد الإلكتروني" name = "البريد الإلكتروني" ng-model = "user.email" />
6. الأرقام
تحقق من أن محتوى الإدخال هو رقم وتعيين نوع الإدخال على الرقم:
انسخ الرمز كما يلي: <إدخال type = "number" name = "Age" ng-model = "user.age" />
7. URL
تحقق من أن محتوى الإدخال هو عنوان URL وتعيين نوع الإدخال على عنوان URL:
انسخ الرمز كما يلي: <إدخال type = "url" name = "homepage" ng-model = "user.facebook_url" />
دعنا نختبر هذه التحقيقات النموذجية في تطبيقات محددة:
<viv> <form rob = "form"> <viv> <viv> <label for = "name"> 1.required </billy> </viv> <div> <input id = "name" type = "text" مطلوب ng-model = 'user.name'/> </fire> <viv> <viv> <div> <blish for = "minlength". الحد الأدنى للطول = 5 </label> </viv> <viv> <input type = "text" id = "minlength" ng-minlength = "5" ng-model = "user.minlength"/> </viv> </viv> <div> <blish for = "minlength"> 3.maximum length = 20//div> ng-maxlength = "20"/> </viv> </viv> <viv> <viv> <label for = "minlength"> 4. مطابقة النمط </label> </viv> <viv> <input type = "text" id = "minlength" ng-model = "user.pattern" ng-pattern = "/^[a-za-z]*/d $/"/> </viv> </viv> <viv> <div> <label for email "5. البريد الإلكتروني </label> </div> </viv> <viv> <label for = "email"> 5. البريد الإلكتروني </label> </div> <viv> <input type = "email" id = "email" name = "email" ng-model = "user.email"/> </viv> </viv> <viv> <iv> <label for = "age"> 6. رقم </label> </viv> <viv> <input type = "number" id = "age" name = "age" ng-model = "user.age"/> </viv> </viv> <viv> <div> <label for = "erl"> 7. </viv> </viv> <div> <input type = "subvice" value = "submit"/> </fire> </form> </viv> <viv> 1. الحقول المطلوبة: {{user.name}} <br> 2. دقيقة. طول = 5: {{user.minlength}}} <br> 3. الحد الأقصى طول = 20: {{user.maxlength}} <br> 4. مطابقة نمط: {user.pattern}}} <br> 5. البريد الإلكتروني: {user.email}} 7.url: {{user.url}} <br> </viv>في الاختبار ، وجدنا أنه سيتم تنفيذ الربط في اتجاهين في الوقت الفعلي فقط عندما يفي التعبير بالتحقق. في الوقت نفسه ، وجدنا أيضًا أن العروض هي كما يلي:
لا شيء يبدو أنه لم يحدث ، ولكن إذا قمنا بنقله إلى متصفح مع فريق من التحقق من HTML5 غير جيد جدًا ، فلنختبره [IE9 في هذا المثال] ، فإن المشكلة هي أن بعض الحقول لا يتم التحقق منها على الإطلاق.
في الواقع ، في المثال أعلاه ، استخدمنا التحقق من HTML5 والتحقق الخاص بـ NG للجمع بينه. لا يدعم التحقق من HTML5 ، لكن التحقق المجاني لـ NG يعمل بشكل جيد. الحل بسيط للغاية. يمكنك استخدام مطابقة الأنماط لحل هذه المواقف ، أو يمكنك تخصيص تعليمات التحقق لإعادة كتابة أو إعادة تعريف قواعد التحقق.
منع سلوك التحقق الافتراضي للمتصفح للنماذج
فقط أضف علامة novalidate على عنصر النموذج. والسؤال هو كيف نعرف الحقول في شكلنا صالحة ، وأي الأشياء غير قانونية أو غير صالحة؟ يوفر NG أيضًا حلاً رائعًا لهذا الغرض. يمكن الوصول إلى خصائص النموذج في كائن نطاق $ الذي ينتمي إليه ، ويمكننا الوصول إلى كائن نطاق $ ، بحيث يمكن لـ JavaScript الوصول بشكل غير مباشر إلى خصائص النموذج في DOM. مع هذه الخصائص ، يمكننا الاستجابة في الوقت الحقيقي للنموذج.
يمكن الوصول إلى هذه الخصائص باستخدام formname.inputfieldname.property.
شكل غير معدّل
خاصية منطقية تشير إلى ما إذا كان المستخدم قد قام بتعديل النموذج. إذا كان الأمر كذلك ، فهذا يعني أنه لم يتم تعديله ؛ خطأ يعني أنه تم تعديله:
نسخة الكود كما يلي: formName.inputfieldName. $ prebery ؛ شكل معدّل
خاصية منطقية إذا وفقط إذا قام المستخدم بتعديل النموذج بالفعل. بغض النظر عما إذا تم التحقق من النموذج أم لا:
نسخة الكود كما يلي: formname.inputfieldname. $ Dirty
شكل تم التحقق منه
خاصية منطقية تشير إلى ما إذا كان النموذج قد مر بالتحقق. إذا تم التحقق من صحة النموذج حاليًا ، فسيكون ذلك صحيحًا:
رمز النسخ كما يلي: formName.InputFieldName. $ صالح رمز النسخ كما يلي: formName.inputfieldname. $ غير صالح
تكون الخصائص الأخيرة مفيدة بشكل خاص عند استخدامها للعرض أو إخفاء عنصر DOM. في الوقت نفسه ، فهي أيضًا مفيدة جدًا إذا كنت ترغب في إعداد فصل محدد.
خطأ
هذه خاصية أخرى مفيدة للغاية توفرها AngularJS: كائن خطأ $. أنه يحتوي على جميع محتوى التحقق من النموذج الحالي ، وكذلك معلومات حول ما إذا كانت شرعية. الوصول إلى هذه الخاصية باستخدام بناء الجملة التالي
نسخة الكود كما يلي: formname.inputfieldname. $ خطأ
إذا فشل التحقق ، فإن قيمة هذه الخاصية صحيحة ؛ إذا كانت القيمة خاطئة ، فهذا يعني أن قيمة حقل الإدخال قد مرت بالتحقق.
أدناه نختبر تعليمات التحقق هذه:
<! doctype html> <html ng-app = "mytest"> <head> <meta name = "viewport" content = "width = width device"/> <title> index </title> <link href = "~/content/css/botstrap.min.cs" rel = "stylesh" src = "~/javaScript/Angular.min.js"> </script> <style type = "text/css"> body {padding-top: 30px ؛ } </style> </head> <body ng-controller = "myController"> <viv> <form rob vear = "form" name = "myform" ng-submit = "submitform (myform. $ applical)" novalidate> <viv> ng-model = 'user.name'/> <span ng-show = "myform.name. $ dirty && myform.name. $ valid"> </span> </viv> </viv> <viv> <div> <label for = "minlength"> 2. الحد الأدنى للطول = 5 </label> </viv> <viv> <input type = "text" id = "minlength" name = "minlength" ng-minlength = "5" ng-model = "user.minlength"/> <span ng-show = "myform.minlength. $ dirty && myform.minlength. لـ = "maxLength"> 3.maximum طول = 20 </billy> </viv> <viv> <input type = "text" id = "maxlength" name = "maxLength" ng-model = "user.maxlength" ng-maxlength = "20"/> <span ng-show = "myform.maxlength. $ dirty &&تو my </sanform. </viv> <viv> <viv> <label for = "pattern"> 4. مطابقة النمط </label> </viv> <viv> <input type = "text" id = "pattern" name = "pattern" ng-model = "user.pattern" ng-pattern = "/^[a-za-z]*/d $/"/> <span ng-show = "myform.pattern. $ dirty. <label for = "email"> 5. البريد الإلكتروني </label> </viv> <viv> <input type = "email" id = "email" name = "email" ng-model = "user.email"/> <span ng-show = "myform.email. $ dirty && myform.email. $ appaled"> </viv> </viv> <viv> <bil> رقم </label> </viv> <viv> <input type = "number" id = "age" name = "age" ng-model = "user.age"/> <span ng-show = "myform.age. $ dirty && myform.age. id = "url" name = "url" ng-model = "user.url"/> <span ng-show = "myform.url. $ dirty && myform.url. $ applical"> </span> </viv> </div> <div> <input ng-disabled = "myform. $ invalid" type = {{user.name}} $ priber [غير معدل]: {{myform.name. $ pristine}} $ dirty [modified]: {{myform.name. $ dirty}}} $ invalid] {{myform.name. $ error.required}}} <br> 2. {{myform.minlength. $ invalid}} einivalid 【التحقق الناجح】: {{myform.minlength. $}} reror 【【【【】 {{myform.maxlength. $ pribertine}} $ dirty 【modified】: {{myform.maxlength. $ dirty}} $ invalid 【【【【【】 {{myform.maxlength. $ explid}} $ 【【【【【 {{myform.maxlength. $ error}}} <br> 4. مطابقة النمط: {{user.pattern}} $ pristine 【غير معدل】: {myform.pattern. $ pristine}} $ dirtified 【】: {{myform.pattern. $ invalid}} invalid 【التحقق الناجح】: {{myform.pattern. $ invalid}} $ خطأ 【تفاصيل الخطأ】: }} $ dirty 【modified】: {{myform.email. $ dirty}} einivalid 【فشل التحقق】: {{myform.email. $ invalid}} $ invalid 【ferification】】】 {{myform.ed. {{user.age}} $ priber 【غير معدل】: {{myform.age. $ pribertine}} $ dirty 【modified】: {{myform.age. $ dirty}} $ غير صالح 【غير صالح $ خطأ 【تفاصيل الخطأ】】: {{myform.age. $ error}} <br> 7.url: {{user.url}} $ prible 【【【【】】: {{myform.url. $ invalid}} invalid 【التحقق الناجح】: {{myform.url. $ valid}} $ خطأ 【تفاصيل الخطأ】: {{myform.url. $ error}} <br> .Controller ('myController' ، function ($ scope) {$ scope.submitform = function (isValid) {if (! isValid) {alert ('failition explishالآثار هي كما يلي:
في الوقت نفسه ، وضعت NG بعض أنماط CSS لتعليمات التحقق هذه بطريقة مستهدفة.
تشمل:
نسخة الكود كما يلي: .ng-valid {} .ng-invalid {} .ng-pristine {} .ng-dirty {}/ * قواعد css محددة حقًا تم تطبيقها بواسطة Angular */. ng-invalid-required {} .ng-invalid-minlength {}.
أنها تتوافق مع الحالة المحددة لحقل إدخال النموذج.
على سبيل المثال ، عندما تكون الإدخال في حقل غير قانوني ، ستتم إضافة فئة .ng-invlid إلى هذا الحقل. يمكنك تعديل CSS المفضلة لديك. يمكنك تخصيص هذه الفئات بشكل خاص لتنفيذ تطبيقات سيناريو محددة.
ومع ذلك ، قد لا تتمكن إرشادات التحقق الافتراضية من تلبية سيناريوهات التطبيق الحقيقية بالكامل ، كما يتم توفير وظائف تعليمات التحقق المخصصة بواسطة NG.
أولاً ، دعونا نلقي نظرة على مثال بسيط:
angular.module ("mytest" ، []) .DIRECIVER ('multiremail' ، [function () {return {require: /^(Budapa-Z0-9 !#$٪&'*+//=؟^_` {ourcy ngmodel.رمز الصفحة HTML كما يلي:
<form rom = "form" id = "custom_form" name = "custom_form" novelidate> <viv> <label> البريد الإلكتروني المتعدد < /label> <div> <إدخال name-eMail متعدد = "user_email" ng-model = "user.email" مطلوب placeholder = "مخصص ، عناوين بريد إلكتروني متعددة ، تقسيم" ؛ "؛" </viv> </viv> <viv> <input ng-disabled = "custom_form. $ invalid" type = "submit" value = "submit"/> </viv> </mpl>
الكود بسيط للغاية ، والتأثير كما يلي:
هذا الرمز بسيط للغاية ، ولكنه يتضمن العديد من الخصائص المهمة لـ NGMODELCONTROLLER. $ viewValue
تحتوي خاصية ViewValue $ على السلسلة الفعلية المطلوبة لتحديث العرض.
$ ModelValue
يتم الاحتفاظ بـ $ ModelValue بواسطة نموذج البيانات. قد تكون $ ModelValue و $ ViewValue مختلفة اعتمادًا على ما إذا كان خط أنابيب $ arser يعمل عليه.
$ parsers
قيمة $ parsers هي صفيف يتكون من وظائف. عندما يتفاعل المستخدم مع وحدة التحكم وطريقة $ setViewValue () في ngmodelController ، يتم استدعاء الوظائف في ngmodelcontroller واحدة من قبل المستخدم عند تفاعل المستخدم مع وحدة التحكم ، ويتم استدعاء $ setViewValue () يتم تمرير القيمة التي يقرأها ngmodel من DOM إلى الوظيفة في محللات $ ويتم معالجتها بواسطة المحلل المحلل بالتسلسل. هذا لمعالجة وتعديل القيم.
ملاحظة: يتم استخدام وظيفة ngmodel. $ setViewValue () لتعيين قيمة العرض في النطاق.
يمكن أن تقبل وظيفة ngmodel. $ setViewValue () المعلمة.
القيمة (السلسلة): معلمة القيمة هي القيمة الفعلية التي نريد تعيينها إلى مثيل NGMODEL.
تقوم هذه الطريقة بتحديث قيمة ViewValue $ المحلية على وحدة التحكم وتمرر القيمة إلى كل وظيفة $ arser (بما في ذلك المدقق). عندما يتم تحليل القيمة وتتم استدعاء جميع الوظائف في خط أنابيب $ arser ، سيتم تعيين القيمة لخاصية $ ModelValue وتمريرها إلى التعبير الذي توفره خاصية نموذج NG في التعليمات. أخيرًا ، بعد اكتمال جميع الخطوات ، سيتم استدعاء جميع المستمعين في $ ViewChangelisteners . لاحظ أن استدعاء $ setViewValue () وحده لن يثير حلقة Digest جديدة ، لذلك إذا كنت ترغب في تحديث التوجيه ، فأنت بحاجة إلى تشغيل Digest يدويًا بعد تعيين $ ViewValue. طريقة $ setViewValue () مناسبة للاستماع إلى الأحداث المخصصة في توجيهات مخصصة (مثل استخدام مكون إضافي jQuery مع وظائف رد الاتصال) ، نود تعيين $ viewvalue وتنفيذ حلقات الهضم عند استدعاء رد الاتصال.
التنسيقات $
قيمة التنسيقات $ هي مجموعة من الوظائف التي تسمى واحدة تلو الأخرى في شكل خط أنابيب عندما تتغير قيمة نموذج البيانات. ليس له أي تأثير على خط أنابيب $ arser ويستخدم لتنسيق القيم وتحويلها لعرضها في عناصر تحكم مع هذه القيمة ملزمة.
$ viewChangelisteners
قيمة $ viewChangelisteners هي مجموعة من الوظائف التي تسمى واحدة تلو الأخرى في شكل خط أنابيب عندما تتغير القيمة في العرض. مع $ ViewChangelisteners ، يمكن تحقيق سلوك مماثل دون استخدام ساعة $. منذ تجاهل قيمة الإرجاع ، لا تحتاج هذه الوظائف إلى إرجاع القيم.
خطأ $
يحتفظ كائن خطأ $ باسم المدقق الذي لم يمر بالتحقق ومعلومات الخطأ المقابلة.
البكر $
قيمة البكر $ هي منطقية ، والتي يمكن أن تخبرنا ما إذا كان المستخدم قد قام بتعديل عنصر التحكم.
قذرة $
إن قيمة $ Dirty هي عكس البكر $ ، والتي يمكن أن تخبرنا ما إذا كان المستخدم قد تفاعل مع عنصر التحكم.
$ صالح
تخبرنا القيمة الصالحة $ ما إذا كانت هناك أخطاء في عنصر التحكم الحالي. القيمة خاطئة عندما يكون هناك خطأ ، والقيمة صحيحة عندما لا يكون هناك خطأ.
$ غير صالح
تخبرنا القيمة غير الصالحة $ ما إذا كان هناك خطأ واحد على الأقل في عنصر التحكم الحالي ، وقيمتها هي عكس $ صالحة.
بعد تعلم نقاط المعرفة الأساسية ، تحتاج إلى تعلم طريقة الكتابة بالتحقق المخصص بعمق. بعد NG1.3 ، تم تحسين سهولة استخدام تعليمات التحقق.
ما سبق هو شرح مفصل لأمثلة باستخدام نموذج التحقق من AngularJS الذي قدمه لك المحرر. آمل أن تساعدك. سأستمر في تحديث المعرفة ذات الصلة بنموذج التحقق من AngularJS لك في المستقبل. يرجى الانتباه إلى موقع wulin.com!