على الرغم من أنني لست مبرمجًا في الواجهة الأمامية ، إلا أنني أفهم مدى أهمية القيام بعمل جيد للتحقق من الواجهة الأمامية.
لأنه بهذه الطريقة ، يمكن للواجهة الخلفية أن تأخذ نفسًا أكبر ، ومقارنة مع الواجهة الخلفية ، يمكن للواجهة الأمامية بالفعل تحسين شعور المستخدم بالسعادة.
يوفر AngularJS وظيفة التحقق من النماذج مريحة للغاية ، وتسجيلها هنا.
ابدأ أولاً بالرمز التالي
نسخة الكود كما يلي:
<form ng-app = "myapp" ng-controller = "ValidationController" name = "mainform" novalidate>
<p> البريد الإلكتروني:
<type type = "البريد الإلكتروني" name = "البريد الإلكتروني" ng-model = "البريد الإلكتروني" المطلوب>
<span style = "color: red" ng-show = "mainform.email. $ dirty && mainform.email. $ invalid">
<span ng-show = "mainform.email. $ error.required"> البريد الإلكتروني مطلوب. </span>
<span ng-show = "mainform.email. $ error.email"> عنوان بريد إلكتروني غير صالح. </span>
</span>
</p>
<p>
<type type = "إرسال" ng-disabled = "mainform. $ invalid">
</p>
</form>
<script>
angular.module ('myapp' ، [])
.controller ('ValityController' ، ['$ scope' ، function ($ scope) {
$ scope.user = 'Kavlez' ؛
$ scope.email = '[email protected]' ؛
}]) ؛
</script>
عادة ما يتم استخدام بعض خيارات التحقق من علامات الإدخال مع علامات HTML5.
مطلوب
<نوع الإدخال = "النص" المطلوب />
طول
استخدم التوجيه ng-minlength/ng-maxlength
<type type = "text" ng-minlength = "5" />
تنسيق محدد
على سبيل المثال ، البريد الإلكتروني وعنوان URL والرقم ، ما عليك سوى تعيين النوع على النوع المقابل ، على سبيل المثال:
نسخة الكود كما يلي:
<type type = "email" name = "البريد الإلكتروني" ng-model = "user.email" />
<type type = "number" name = "Age" ng-model = "user.age" />
<type type = "url" name = "homepage" ng-model = "user.facebook_url" />
مطابقة نمط
استخدم توجيه NG-Pattern ، على سبيل المثال:
نسخة الكود كما يلي:
<type type = "text" ng-pattern = "[az]" />
خصائص النماذج ، هذه الخصائص تسهل العمل على النماذج
البكر/القذرة
يشير إلى ما إذا كان قد تم تعديله ، على سبيل المثال
نسخة الكود كما يلي:
<form name = "mainform" ng-controller = "orderController">
<input type = "email" name = "useremail" ng-model = "myemail" />
{{mainform.useremail. $ pristine}}
{{mainform.useremail. $ dirty}}
</form>
تم الوصول إليه في formname.fieldname. $ prise mode ، يجب أن يكون للإدخال إعلان NG-model.
نسخة الكود كما يلي:
صالح/غير صالح
يشير ما إذا كان يمر التحقق.
نسخة الكود كما يلي:
خطأ $
يتم إرجاع معلومات التحقق من النموذج ، ويتم إرجاع المعلومات المقابلة في حالة فشل التحقق.
يوفر AngularJS فئة CSS وفقًا لذلك لحالة النموذج
نسخة الكود كما يلي:
.ng-pristine
.ng-dirty
.ng-valid
.ng-invalid
على سبيل المثال ، دع التحقق يمر باللون الأخضر وفشل اللون الأحمر:
نسخة الكود كما يلي:
input.ng-valid {
اللون: أخضر.
}
input.ng-invalid {
اللون: أخضر.
}
في المثال المقدم ، يتم التحقق من رسالة بريد إلكتروني واحدة فقط. إذا قمت بإضافة بعض الحقول ، وأضف بعض المطالبات المختلفة ، وأضفت بعض الأحداث ، فسيصبح الرمز فوضويًا.
في الواقع ، لا ينصح بذلك ، لدينا طريقة أفضل.
إنه لاستخدام messages.js
بادئ ذي بدء ، لا تنس هاتين الخطوتين
نسخة الكود كما يلي:
<script src = "Angular-messages.js"> </script>
angular.module ('myapp' ، ['ngmessages'])
حسنًا ، استبدل أولاً تلك التكرارات بـ ng-messages و ng-message ، ويصبح المثال أعلاه:
نسخة الكود كما يلي:
<form ng-controller = "ValidationController" name = "mainform">
<p> البريد الإلكتروني:
<المدخلات
اكتب = "البريد الإلكتروني" name = "البريد الإلكتروني" ng-model = "myemail" ng-minlength = "3" ng-maxlength = "50" مطلوب />
<div style = "color: red" ng-messages = "mainform.email. $ error" ng-messages-multiple>
<p ng-message = "مطلوب"> البريد الإلكتروني مطلوب. </p>
<p ng-message = "البريد الإلكتروني"> عنوان بريد إلكتروني غير صالح. </p>
<p ng-message = "minlength"> طول دقيقة 10 </p>
<p ng-message = "maxlength"> الحد الأقصى طول 50 </p>
</div>
</p>
<p>
<type type = "إرسال" ng-disabled = "mainform. $ invalid" />
</p>
</form>
لا يوجد أي تغيير في الوظيفة ، فقط تمت إزالة الكود المكرر.
انتبه إلى التمييز بين NG-Messasges و NG-Messages. هل تشعر وكأنها مع ()؟ يتم استخدام ng-messages-multiple خلفه لإجراء مطالبات متعددة تظهر في نفس الوقت.
لكن هذا لا يزال غير جيد بما فيه الكفاية. حتى إذا تم حذف المحتوى الموجود في NG-Message ، فسيظل هناك ازدواج عند وجود التحقق المطلوب في حقول متعددة.
علاوة على ذلك ، سيكون هناك المزيد من مطالبات التحقق المتكررة إذا كانت النماذج على صفحات مختلفة تنطوي على نفس المحتوى.
لحل هذه المشكلة ، يمكننا استخدام توجيه NG-Messages-In-Teb.
يتم استخدام هذا التوجيه للإشارة إلى القوالب ، على سبيل المثال ، يصبح المثال أعلاه:
نسخة الكود كما يلي:
<form ng-controller = "ValidationController" name = "mainform">
<p> البريد الإلكتروني:
<المدخلات
اكتب = "البريد الإلكتروني" name = "البريد الإلكتروني" ng-model = "myemail" ng-minlength = "3" ng-maxlength = "50" مطلوب />
<div style = "color: red" ng-messages = "mainform.email. $ error" ng-messages-multiple ng-messages-in-till =
</div>
</p>
<p>
<type type = "إرسال" ng-disabled = "mainform. $ invalid" />
</p>
</form>
إنه ليس معقدًا ، دعنا نضيف شيئًا.
من أجل جعل المطالبات أكثر ودية (؟) ، نحاول تحقيق تأثير المطالبات التي تظهر بعد أوراق المؤشر.
في هذا الوقت ، سيكون أكثر ملاءمة لاستخدام التوجيهات. هنا نرسل أولاً بعض المعلومات المتعلقة بالتعليمات.
قم بتشغيله أولاً ثم تحدث عنه:
نسخة الكود كما يلي:
var myapp = Angular.module ('myapp' ، [])
.controller ('ValityController' ، ['$ scope' ، function ($ scope) {
$ scope.user = 'Kavlez' ؛
$ scope.email = '[email protected]' ؛
}])
.DIRECITION ('Hintonblur' ، [function () {
يعود {
يتطلب: 'ngmodel' ،
الرابط: الدالة (النطاق ، العنصر ، attrs ، ctrl) {
ctrl.focused = false ؛
element.bind ('Focus' ، function (evt) {
Scope. $ تطبيق (function () {ctrl.focused = true ؛}) ؛
}). bind ('Blur' ، function (evt) {
Scope. $ تطبيق (function () {ctrl.focused = false ؛}) ؛
}) ؛
}
}
}]) ؛
هنا نستخدم التركيز لتحديد ما إذا كان المؤشر موجودًا على خاصية معينة. عندما يحدث حدث التركيز أو التمويه على كائن باستخدام توجيه Hintonblur ، تغيرت حالة التركيز.
سيتم تغيير النموذج على النحو التالي:
نسخة الكود كما يلي:
<form ng-controller = "ValidationController" name = "mainform">
<p> البريد الإلكتروني:
<type type = "email" name = "email" ng-model = "myemail" ng-minlength = "3" ng-maxlength = "50"
<div style = "color: red" ng-messages = "mainform.email. $ خطأ" ng-show = "! mainform.email.focused" ng-messages-multiple ng-messages-in-tclude = "validatetemplate/email.html">
</div>
</p>
<p>
<type type = "إرسال" ng-disabled = "mainform. $ invalid" />
</p>
</form>
أضف حكم التركيز في NG-Show ، ويظهر موجه عندما يكون خطأ.
يبدو ذلك الآن.
تخصيص طرق التحقق وصلاحية ، والتي تستخدم أيضًا التوجيهات.
تحقق من أن البريد الإلكتروني الذي ملأته قد شغله. هذه محاكاة بسيطة:
نسخة الكود كما يلي:
.DIRECITION ('isalreadytaken' ، function () {
يعود {
يتطلب: 'ngmodel' ،
الرابط: الدالة (النطاق ، ele ، attrs ، ctrl) {
ctrl. $ parsers.push (function (val) {
ctrl. $ setValidity ('emailavailable' ، false) ؛
var emailTable = [
'[email protected]'] ؛
لـ (var i = 0 ؛ i <emailTable.length ؛ i+= 1)
إذا (Val == EmailTable [i])
يعود؛
ctrl. $ setValidity ('EmailAvailable' ، true) ؛
إرجاع فال
})
}
}
})
أضف السمة is-already-taken إلى عنصر الإدخال وأضف message ng آخر:
نسخة الكود كما يلي:
<p ng-message = "eilmavailable"> يأخذ بالفعل! جرب عناوين البريد الإلكتروني الأخرى! </p>