كما هو موضح في الشكل أعلاه ، نحتاج إلى تنفيذ وظائف التحقق التالية:
الضوابط ضوابط مطلوبة
كل بحاجة إلى التحكم في الحد الأقصى للطول
في المرة الأولى التي يتم فيها فتح الصفحة ، لا يمكن عرض عنصر التحكم كحالة خطأ
بعد مسح محتوى الإدخال ، يجب عرض التحكم في الإدخال المطلوب كحالة خطأ
لا يمكن أن يصبح زر النشر متاحًا إلا بعد أن تكون جميع المدخلات صالحة.
مع AngularJS ، يمكننا بسهولة تنفيذ هذه المتطلبات ، لا يلزم سوى سطر واحد من رمز JS. يستخدم نمط واجهة المستخدم bootstrap هنا. لنبدأ بعينة رمز:
HTML.
<! doctype html> <html lang = "zh-cn" ng-app = "ftitapp"> <head> <meta charset = "utf-8"/> <title> demo </title> <link href = "/content/bootstrap.cs src = "/scripts/Angular.js"> </script> </head> <body> <viv> <!-منطقة المحتوى الرئيسي-> <viv> <viv> <!-اتصل بنا على مساحة النموذج-> <form action = "/contact/create" method = "post" rol " ng-class = "{'has-success':! createContActform.username. $ pristine && createContActform.username. $ صالحة ، 'has-error':! createContactform.username. $ pristine && createContactForm.username. $ everalid}" ng-model = "username" name = "username" autofocus = "" مطلوب ng-maxlength = 30> <div ng-show = "! createContActform.username. $ pristine && createContActform.username. $ valed"> </span> </div> <viv ng-show = CreateContactform.username. $ غير صالح "> <span> </span> </viv> <!-عنوان البريد الإلكتروني Usermail-> <div ng-class =" {'has-success':! createContactform.usermail. $ pristine && createContActform.Usermail. $ appal ، 'has-error':! CreateContactForm.usermail. $ invalid} "> <label for =" usermail "عنوان البريد الإلكتروني*</billy> <input type =" البريد الإلكتروني "ng-model =" usermail "name =" usermail "مطلوب ng-maxlength = 30> <div ng-show = ' </viv> <div ng-show = "! createContActform.usermail. $ pristine && createContActform.usermail. $ invalid"> <span> </span> </viv> </viv> <!-الموضوع-> <div ng-class = "{'has-success':! "has-error":! createContactform.subject. $ pristine && createContActform.Subject. $ invalid} "> <label for =" tourge "> </label> <input type =" text "ng-model =" tourge "name =" table "مطلوب ng-maxlength = 100> <viv ng-show =" createContactform.subject. $ صالحة "> <span> </span> </div> <div ng-show ="! createContactform.Subject. $ pristine && createContactform.Subject. $ غير صالح "> </span> </div> </div> <! ! createContactform.content. $ pristine && createContactform.content. $ صالحة ، 'has-error':! createContactform.content. $ pristine && createContactform.content. $ invalid} " ng-maxlength = 1000> </textarea> <div ng-show = "! createContActform.content. $ pristine && createContActform.content. $ valid <!-زر إرسال-> <div> <div ng-show = "createContactform. $ appal"> <input type = "image" src = "/content/images/comment_publish_button.png" onsubmit = "submit () ؛" value = "publish" ng-disabled = '! createContActform. $ appal'/> </div> <div ng-show = "! createContActform. $ valid src = "/scripts/ftit/contactCreateController.js"> </script> </body> </html>رمز JS (إنه بالفعل سطر واحد فقط)
ContractCreateController.js
var ftitappmodule = Angular.Module ('ftitapp' ، []) ؛هذا جيّد. بعض النقاط الرئيسية لشرح:
NG-Class: يتم استخدام هذه العلامة للتحكم في قيمة الفصل. على سبيل المثال ، ng-class = "{'has-success':! createContactform.content. $ prebery} يعني أنه إذا كانت قيمة! createContactform.content.
NG-Show: يتحكم في ما إذا كان يتم عرض التحكم.
CreateContactform. $ صالح: بعد تمرير كل التحقق ، تكون القيمة صحيحة ، وإلا فهي خاطئة
CreateContactform.content. $ صالحة: يحدد ما إذا كان عنصر التحكم في المحتوى يمر بالتحقق ، ويمرر صحيحًا ، وإلا فهو خطأ
CreateContActform.content. $ pristine: يحدد ما إذا لم يتم إدخال التحكم في المحتوى. لم يتم إدخاله أبدًا على أنه صحيح ، وإلا فهو خطأ
لمزيد من المشكلات الفنية التفصيلية ، يرجى التحقق من الوثائق الفنية AngularJS.