Seperti yang ditunjukkan pada gambar di atas, kita perlu mengimplementasikan fungsi verifikasi berikut:
Kontrol diperlukan kontrol
Semua perlu mengontrol panjang maksimum
Pertama kali halaman dibuka, kontrol tidak dapat ditampilkan sebagai keadaan kesalahan
Setelah konten input dihapus, kontrol input yang diperlukan perlu ditampilkan sebagai keadaan kesalahan
Tombol publikasi hanya dapat tersedia setelah semua input valid.
Dengan AngularJS, kami dapat dengan mudah menerapkan persyaratan ini, hanya 1 baris kode JS yang diperlukan. Gaya UI menggunakan bootstrap di sini. Mari kita mulai dengan kode sampel:
Html.
<! Doctype html> <html lang = "zh-cn" ng-app = "ftitapp"> <head> <meta charset = "utf-8"/> <title> demo </iteme> <tautan href = "/content/bootstrap.css" rel = "stylesheet"/> src="/Scripts/angular.js"></script></head><body> <div> <!-- Main content area--> <div> <div> <!-- Contact us form area--> <form action="/Contact/Create" method="post" role="form" name="createContactForm" ng-controller="ContactCreateController"> <!-- UserName Your name--> <div ng-class = "{'have-success' :! createContactform.userName. $ pristine && createContactform.userName. $ valid, 'have-error' :! CreateContactform.userName. $ pristine && createContacTform NG-Model = "Nama Pengguna" Nama = "Nama Pengguna" Autofocus = "" Diperlukan Ng-Maxlength = 30> <div ng-show = "! CreateContacTform.userName. $ pristine && createContactform.userName. $ valid"> <pan> </span> </div> <div ng-show = "! createContacTform.userName. $ Invalid "> <span> </span> </div> <!-Alamat email USERMAIL-> <div ng-class =" {'have-success' :! CreateContacTform.usermail. $ pristine && createContacTform.usermail. $ valid, 'have-error':! createContacTform.usermail. $ tidak valid} "> <label for =" userMail "> alamat email*</label> <input type =" email "ng-model =" userMail "name =" userMail "diperlukan ng-maxlength = 30> <div ng-show ="! createContacTform </div> <div ng-show = "! createContactform.usermail. $ pristine && createContactform.usermail. $ tidak valid"> <span> </span> </div> </div> <!-subjek-> <v ng-class = "{'has-success':! createContform.sublect. 'has-error' : !createContactForm.Subject.$pristine && createContactForm.Subject.$invalid }"> <label for="Subject">Subject*</label> <input type="text" ng-model="subject" name="Subject" required ng-maxlength=100> <div ng-show="!createContactForm.Subject.$pristine && createContacTform.subject. $ valid "> <span> </span> </div> <div ng-show ="! createContactform.subject. $ pristine && createContactForm.subject. $ Invalid "> <span> </span> </div> </div> <!-content-> <Div NG-CLASS =" ! createContacTform.content. $ pristine && createContacTform.content. $ valid, 'has-error' :! CreateContactform.content. $ pristine && createContactForm.content. $ "" "" BAGE "" Content = "Content"> </label> <textarea cols = "" Content "" label = "Content"> Content*</label> <textarea cols = "content" "label =" Content "> Content*</label> <textarea cols =" Content "" label "label =" Content "> Content*<label> <textarea cols =" content "" label = "Content" Content*</label> <textarea cols = "Content" "label =" Content "Content* ng-maxlength = 1000> </textarea> <div ng-show = "! createContactform.content. $ pristine && createContactform.content. $ valid"> <span> </span> </Div> <v Ng-Show = "! CreateContacTform.content. $ Pristine & </Divecontac. <!-Kirim Tombol-> <SEV> <Div ng-show = "createContactForm. $ Valid"> <input type = "image" src = "/content/image/comment_publish_button.png" onsubmit = "kirim ();" value = "publish" ng disabled = '! createContactFform. $ valid'/> </div> <div ng-show = "! createContactFform. $ valid"> <img src = "/content/images/invalid_publish_button.png"/</div> </form> </div> div> div> div> div> </div> </div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> src = "/skrip/ftit/contactCreateController.js"> </cript> </body> </html>Kode JS (ini benar -benar hanya satu baris)
ContractCreateController.js
var ftitappmodule = angular.module ('ftitapp', []);Tidak apa -apa. Beberapa poin penting untuk dijelaskan:
NG-Class: Tag ini digunakan untuk mengontrol nilai kelas. Misalnya, ng-class = "{'have-success' :! CreateContacTform.content. $ Pristine} berarti bahwa jika nilai! CreateContacTform.content. $ Pristine benar, nilai kelas memiliki kesopanan.
NG-Show: Kontrol apakah kontrol ditampilkan.
CreateContactform. $ Valid: Setelah semua verifikasi dilewati, nilainya benar, jika tidak itu salah
CreateContactform.content. $ Valid: Mengidentifikasi apakah kontrol konten melewati verifikasi, lulus benar, jika tidak itu salah
CreateContactform.Content. $ Pristine: Mengidentifikasi apakah kontrol konten belum pernah dimasukkan. Itu tidak pernah dimasukkan sebagai benar, jika tidak itu salah
Untuk masalah teknis yang lebih terperinci, silakan periksa dokumentasi teknis AngularJS.