AngularJS التحقق من المدخلات
يمكن أن تتحقق أشكال AngularJS من بيانات الإدخال.
أدخل التحقق
في الفصول السابقة ، تعلمت عن أشكال وضوابط AngularJS.
يمكن أن توفر أشكال وضوابط AngularJS قدرات التحقق وتحذير من البيانات غير القانونية التي أدخلها المستخدمون.
ملاحظة: لا يمكن للتحقق من العميل ضمان أمان بيانات إدخال المستخدم ، لذلك من الضروري التحقق من البيانات على الخادم أيضًا.
رمز التطبيق
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <h2> ng-controller = "validatectrl" name = "myform" novalidate> <p> اسم المستخدم: <br> <input type = "text" name = "user" ng-model = "user" مطلوب> <span style = "color: red" ng-show = "myform.user. $ dirty && myform.user. $ غير صالح. اسم المستخدم مطلوب. </span> </span> </p> <p> البريد الإلكتروني: <br> <input type = "email" name = "البريد الإلكتروني" ng-model = "البريد الإلكتروني" المطلوبة> <span style = "color: red" ng-show = "myform.email. $ dirty && myform.email. $ invalid"> <span ng-show = "myform.email. </span> <span ng-show = "myform.email. $ error.email"> عنوان بريد إلكتروني غير قانوني. </span> </span> </p> <p> <propt type = "submit" ng-disabled = "myform.user. $ dirty && myform.user. $ invalid وظيفة (نطاق $) {$ scope.user = 'John Doe' ؛نتائج التشغيل:
مثال التحقق
اسم المستخدم:
بريد:
ملاحظة: يتم استخدام سمة نموذج HTML Novalidate لتعطيل التحقق الافتراضي للمتصفح.
مثال تحليل
يتم استخدام توجيه AngularJS NG-Model لربط عناصر الإدخال في النموذج.
يحتوي كائن النموذج على خصائصان: المستخدم والبريد الإلكتروني.
استخدمنا توجيه NG-Show ، اللون: يتم عرض اللون الأحمر فقط إذا كانت الرسالة قذرة $ أو $ غير صالحة.
| ملكية | يصف |
|---|---|
| قذرة $ | هناك سجلات لملء النموذج |
| $ صالح | محتوى الميدان قانوني |
| $ غير صالح | محتوى الميدان غير قانوني |
| البكر $ | لا يوجد سجل في النموذج |
ما سبق هو مجموعة من معلومات التحقق من إدخال AngularJS. سوف نستمر في استكمالها لاحقًا. آمل أن يساعد الطلاب الذين يدرسون.