Instruksi verifikasi bentuk umum
1. Verifikasi yang diperlukan
Apakah input formulir telah diisi, cukup tambahkan tag HTML5 yang diperlukan ke elemen bidang input:
Salin kode sebagai berikut: <input type = "text" diperlukan />
2. Panjang minimum
Pastikan bahwa panjang teks dari input formulir lebih besar dari nilai minimum tertentu, dan gunakan instruksi ng-minleng = "{angka}" pada bidang input:
Salin kode sebagai berikut: <input type = "text" ng-minlength = "5" />
3. Panjang maksimum
Pastikan bahwa panjang teks dari input formulir kurang dari atau sama dengan nilai maksimum tertentu, dan gunakan instruksi ng-maxlength = "{number}" pada bidang input:
Salin kode sebagai berikut: <input type = "text" ng-maxlength = "20" />
4. Pencocokan pola
Gunakan ng-pola = "/pola/" untuk memastikan bahwa input cocok dengan ekspresi reguler yang ditentukan:
Salin kode kode sebagai berikut: <input type = "text" ng-pola = "/[a-za-z]/"/>
5. Email
Verifikasi bahwa konten input adalah email, cukup atur jenis input ke email seperti di bawah ini:
Salin kode sebagai berikut: <input type = "email" name = "email" ng-model = "user.email" />
6. Angka
Verifikasi bahwa konten input adalah angka dan atur tipe input ke nomor:
Salin kode sebagai berikut: <input type = "number" name = "usia" ng-model = "user.age" />
7. URL
Pastikan bahwa konten input adalah URL dan atur tipe input ke URL:
Salin kode sebagai berikut: <input type = "url" name = "homePage" ng-model = "user.facebook_url" />
Mari kita uji verifikasi formulir ini dalam implementasi spesifik:
<Div> <form role = "Form"> <div> <div> <label for = "name"> 1.Required </label> </div> <viv> <input id = "name" type = "text" diperlukan ng-model = 'user.name'/> </div> </div> <Div> <label for for = "MinLength"> 2. Panjang minimum = 5 </label> </div> <v div> <input type = "text" id = "minlength" ng-minlength = "5" ng-model = "user.minlength"/> </div> </div> <Div> <label untuk = "MinLength"> 3.Maximum Length = 20 </Label> </Div> </MM-MIPED "TEKS = TEKS = TEKS = TEKS = 20 </LABEL> </DIV> </Div> </Div>" MinLength "> TEKS =" TEKS = 20 </Label> </Div> </Div> </Div> "MinLengt"> TEKS = "TEPS = 20 </DIV> </Div> </Div> </Div>" MinLenge "> ng-maxlength = "20"/> </div> </div> <div> <div> <label untuk = "MinLength"> 4. Pencocokan Pola </LABEL> </SEV> <IV> <INPUT TYPE = "TEXT" ID = "MinLength" ng-Model = "user.pattern" ng-pola = "/^[a-za-z]*/d $/"/> </div> </div> <div> <Div> <label untuk = "email"> 5. Email </label> </div> </div> <div> <label untuk = "email"> 5. Email </label> </div> <div> <input type = "email" id = "email" name = "email" ng-model = "user.email"/> </div> </div> <ver> <Div> <label untuk = "usia"> 6. Number</label> </div> <div> <input type="number" id="age" name="age" ng-model="user.age" /> </div> </div> <div> <div> <label for="url"> 7. URL</label> </div> <div> <input type="url" id="url" name="homepage" ng-model="user.url" /> </div> </div> <div> <input type = "kirim" value = "kirim"/> </div> </form> </div> <div> 1. Bidang yang diperlukan: {{Usus.name}} <br> 2. Min. length = 5: {{User.minlength}} <br> 3. Maksimum Panjang = 20: {{user.maxlength}} <br> 4. Pencocokan Pola: {{User.pattern}} <br> 5. Email: {{User.email}} <br> 6. {{{{{{{{User.email} <br> 6. 7.Url: {{User.url}} <br> </div>Dalam tes, kami menemukan bahwa pengikatan dua arah akan dilakukan secara real time hanya ketika ekspresi memenuhi verifikasi. Pada saat yang sama, kami juga menemukan bahwa rendering adalah sebagai berikut:
Sepertinya tidak ada yang terjadi, tetapi jika kita porsinya ke browser dengan tim verifikasi HTML5 yang tidak terlalu bagus, mari kita uji [IE9 dalam contoh ini], masalahnya adalah bahwa beberapa bidang tidak diverifikasi sama sekali.
Bahkan, dalam contoh di atas, kami menggunakan verifikasi HTML5 dan verifikasi NG sendiri untuk menggabungkannya. Itu tidak mendukung verifikasi HTML5, tetapi verifikasi gratis NG berjalan dengan baik. Solusinya sangat sederhana. Anda dapat menggunakan pencocokan pola untuk menyelesaikan situasi ini, atau Anda dapat menyesuaikan instruksi verifikasi untuk menulis ulang atau mendefinisikan kembali aturan verifikasi.
Blokir perilaku verifikasi default browser untuk formulir
Cukup tambahkan tag novalidate pada elemen formulir. Pertanyaannya adalah bagaimana kita tahu bidang mana dalam bentuk kita yang valid, dan hal -hal mana yang ilegal atau tidak valid? NG juga memberikan solusi yang bagus untuk ini. Properti formulir dapat diakses dalam objek $ SCOPE yang menjadi miliknya, dan kita dapat mengakses objek $ SCOPE, sehingga JavaScript dapat secara tidak langsung mengakses properti formulir di DOM. Dengan sifat -sifat ini, kita dapat merespons secara real time ke formulir.
Properti ini dapat diakses menggunakan format FormName.InputfieldName.property.
Bentuk yang tidak dimodifikasi
Properti Boolean menunjukkan apakah pengguna telah memodifikasi formulir. Jika itu, itu berarti belum dimodifikasi; Salah berarti bahwa itu telah dimodifikasi:
Salinan kode adalah sebagai berikut: FormName.InputFieldName. $ Pristine; bentuk yang dimodifikasi
Properti Boolean Jika dan hanya jika pengguna benar -benar memodifikasi formulir. Terlepas dari apakah formulir diverifikasi atau tidak:
Salinan kode adalah sebagai berikut: FormName.InputFieldName. $ Dirty
Formulir Terverifikasi
Properti boolean yang menunjukkan apakah formulir telah melewati verifikasi. Jika formulir saat ini divalidasi, itu akan benar:
Kode salin adalah sebagai berikut: FormName.InputFieldName. $ Valid Kode salinan adalah sebagai berikut: FormName.InputFieldName. $ Invalid
Dua properti terakhir sangat berguna saat digunakan untuk tampilan atau menyembunyikan elemen DOM. Pada saat yang sama, mereka juga sangat berguna jika Anda ingin mengatur kelas tertentu.
kesalahan
Ini adalah properti lain yang sangat berguna yang disediakan oleh AngularJS: Objek Kesalahan $. Ini berisi semua konten verifikasi dari formulir saat ini, serta informasi tentang apakah mereka sah. Akses properti ini menggunakan sintaks berikut
Salinan kode adalah sebagai berikut: FormName.InputFieldName. $ ERROR
Jika verifikasi gagal, nilai properti ini benar; Jika nilainya salah, itu berarti bahwa nilai bidang input telah melewati verifikasi.
Di bawah ini kami menguji instruksi verifikasi ini:
<! Doctype html> <html ng-app = "mytest"> <head> <meta name = "viewport" content = "width = device-width"/> <iteme> index </iteme> <tautan href = "~/content/css/bootstrap.min.css" rel = "stylese"/> <csss/bootstrap.min.css "rel =" stylese "/> <csss src = "~/javascript/angular.min.js"> </script> <style type = "text/css"> body {padding-top: 30px; } </style> </head> <body ng-Controller="MyController"> <div> <form role="form" name="myForm" ng-submit="submitForm(myForm.$valid)" novalidate> <div> <div> <label for="name">1.Required</label> </div> <div> <input id="name" name="name" type="text" required ng-model = 'user.name'/> <span ng-show = "myForm.name. $ Dirty && myForm.name. $ valid"> </span> </div> </div> <div> <div> <label untuk = "MinLength"> 2. Panjang minimum = 5 </label> </div> <viv> <input type = "text" id = "minlength" name = "MinLength" ng-minlength = "5" ng-model = "user.minlength"/<span-show = "myform.minlength. $ Dirty && myform.minlength. untuk = "MaxLength"> 3.Maximum length = 20 </label> </div> <ver> <input type = "text" id = "maxlength" name = "maxlength" ng-model = "user.maxlength" ng-maxlength = "20"/<span ng-show = "myForm.maxlength. $ </dolar> </dolar> <span l-sprord. <div> <div> <label untuk = "pola"> 4. Pencocokan pola </label> </div> <viv> <input type = "text" id = "pola" name = "pola" ng-model = "user.pattern" ng-pola = "/^[a-za-z]*/d $/"/<span ng-show = "myform.pattern. $ Dirty && myform.pattern. $ Valid" </span> </div </div. untuk = "email"> 5. Email </LABEL> </SIV> <IV> <INPUT TYPE = "EMAIL" ID = "EMAIL" NAME = "EMAIL" NG-MODEL = "user.email"/> <span ng-show = "myForm.email. $ Dirty && myForm.email. $ Valid"> </span> </div> </div> <Div> <Div> <label untuk = "usia =" usia ". Number </LABEL> </SIV> <DIV> <INPUT TYPE = "NUMBER" ID = "Age" Name = "Age" ng-Model = "user.age"/> <span ng-show = "myForm.age. $ Dirty && myform.age. $ Valid"> </span> </Div> </Div> <Div> <label for = "UR"> </span> </Div> </Div> <Div> <label untuk = "URL"> </span> </Div> </Div> <Div> <label untuk = "URL"> </span> </DIV> </DIV> <LABEL <LABEL untuk = "URL"> </span> </DIV> </DIV> <LABEL <LABEL untuk = "URL"> 7. id = "url" name = "url" ng-model = "user.url"/> <span ng-show = "myForm.url. $ Dirty && myform.url. $ valid"> </span> </div> </div> <Div> <input ng-disabled = "myForm. $ invalid" type = "submit" form/div </form </form </form </form. {{user.name}} $ pristine [tidak dimodifikasi]: {{{myForm.name. $ pristine}} $ kotor [dimodifikasi]: {{{myForm.name. $ Dirty}} $ valid [verifikasi gagal]: {{myForm.name. $ Invalid}} $ {valid {{myForm.name. $ Invalid}} $. Diperlukan: {{myForm.name. $ error.Required}} <br> 2. Panjang minimum = 5: {{user.minlength}} $ pristine [tidak dimodifikasi]: {{myform.minlength. $ pristine}} $ kotor 【dimodifikasi】: {{myForm.min. {{myForm.minlength. $ Invalid}} $ tidak valid 【verifikasi berhasil】: {{myForm.minlength. $ valid} $ error 【Rincian kesalahan】: {{myForm.minlength. $ error}} <br> 3. Maksimum = 20: {{{pengara Panjang 【{noxix {【pengara {【{{no. {no. {{noxine {{noxine {{noxine {{noxine {{noxine. {{myForm.maxlength. $ pristine}} $ Dirty 【dimodifikasi】: {{myForm.maxlength. $ Dirty}} $ tidak valid 【verifikasi gagal】: {{myform.maxlength. $ tidak valid} $ tidak valid 【verifikasi {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{my. {{myform.maxlength. $ error}} <br> 4. Pencocokan pola: {{user.pattern}} $ pristine 【tidak dimodifikasi】: {{myForm.pattern. $ pristine}} $ kotor 【dimodifikasi】: {{myForm.pattern. $ Dirty}} $ {{myForm.pattern. $ tidak valid}} $ tidak valid 【verifikasi berhasil】: {{myForm.pattern. $ invalid}} $ error 【Rincian kesalahan】: {{myForm.pattern. $ error}} <br> 5. Email: {{User. }} $ Dirty 【dimodifikasi】: {{myForm.email. $ Dirty}} $ tidak valid 【Verifikasi gagal】: {{myForm.email. $ tidak valid}} $ tidak valid 【verifikasi berhasil】: {{myform.email. $ valid} $ error 【【【{{{{{{myForm. $. Nomor: {{User.age}} $ pristine 【tidak dimodifikasi】: {{myForm.age. $ Pristine}} $ kotor 【dimodifikasi】: {{myForm.age. $ Dirty}} $ tidak valid 【verifikasi gagal】: {{myForm.age. $ Invalid}} $ verifikasi】: {{myForm.age. $ Invalid}} $ verifikasi】: {{myform.age. $ Invalid} {{myForm.age. $ valid}} $ error 【Rincian kesalahan】: {{myForm.age. $ error}} <br> 7.url: {{{user.url}} $ pristine 【tidak dimodifikasi】: {{{{{{{{{{{{{{{{{{{{{{{{{{{{{pristine】 {{{dirtine {{{{{{{{dirtine {{{{dirtine. $invalid【Verification failed】: {{myForm.url.$invalid}} $invalid【Verification successful】: {{myForm.url.$valid}} $error【Error details】: {{myForm.url.$error}}<br> </div> </body></html><script type="text/javascript"> angular.module ('mytest', []) .controller ('mycontroller', function ($ scope) {$ scope.submitform = function (isValid) {if (! isValid) {alert ('verifikasi gagal');}};}); </script>Efeknya adalah sebagai berikut:
Pada saat yang sama, NG telah menetapkan beberapa gaya CSS untuk instruksi verifikasi ini dengan cara yang ditargetkan.
Itu termasuk:
Salinan kode adalah sebagai berikut: .ng-valid {} .ng-invalid {} .ng-pristine {} .ng-Dirt {}/ * aturan CSS yang sangat spesifik yang diterapkan oleh sudut */. Ng-invalid-rquired {} .ng-invalid-minl-minlength {}-minlength {}-minleng- .ng-minlength {}.
Mereka sesuai dengan keadaan spesifik bidang input formulir.
Misalnya, ketika input dalam bidang adalah ilegal, kelas .ng-invlid akan ditambahkan ke bidang ini. Anda dapat mengedit CSS favorit Anda. Anda dapat menyesuaikan kelas -kelas ini secara pribadi untuk mengimplementasikan aplikasi skenario tertentu.
Namun, instruksi verifikasi default mungkin tidak dapat sepenuhnya memenuhi skenario aplikasi nyata kami, dan fungsi instruksi verifikasi khusus juga disediakan oleh NG.
Pertama, mari kita lihat contoh sederhana:
angular.module ("mytest", []) .directive ('Multipleemail', [function () {return {membutuhkan: "ngModel", tautan: fungsi (lingkup, elemen, attr, ngmodel) {if (ngmodel) {var emailsRegExp = /^( A-Z0-9!#$%&'*+//=?^_` {|} ~-$@+A-Z0-9- $+(/.tase-z0-9-$- )** (valuitas; Ngmodel. $ SetValides ("Multipleemail";Kode halaman HTML adalah sebagai berikut:
<Form role = "Form" id = "custom_form" name = "custom_form" novelidate> <div> <label> Beberapa email </label> <viv> <masukkan nama-email name = "user_email" ng-model = "user.email"}} {{{{{{{{{{valid {{valid {{{{{{valid {{{{{wol vix {{{{wol verifikasi. </div> </div> <div> <input ng-disabled = "custom_form. $ tidak valid" type = "kirim" value = "kirim"/> </div> </form>Kode ini sangat sederhana, dan efeknya adalah sebagai berikut:
Kode ini sangat sederhana, tetapi melibatkan beberapa sifat penting dari NgmodelController. $ viewValue
Properti $ viewValue memegang string aktual yang diperlukan untuk memperbarui tampilan.
$ ModelValue
$ ModelValue dipegang oleh model data. $ ModelValue dan $ ViewValue mungkin berbeda tergantung pada apakah pipa $ parser beroperasi di atasnya.
$ parsers
Nilai $ parsers adalah array yang terdiri dari fungsi. Ketika pengguna berinteraksi dengan pengontrol dan metode $ setViewValue () dalam NgModelController dipanggil, fungsi di ngmodelcontroller disebut satu per satu ketika pengguna berinteraksi dengan pengontrol, dan metode $ setviewValue () dalam NgModelontroller yang disebut satu di dalam satu di dalam bentuk A di satu di satu di dalam satu pipa. Nilai yang dibaca oleh ngmodel dari DOM diteruskan ke fungsi dalam $ parsers dan diproses oleh parser secara berurutan. Ini untuk memproses dan memodifikasi nilai.
Catatan: Fungsi NGModel. $ SetViewValue () digunakan untuk mengatur nilai tampilan dalam ruang lingkup.
Fungsi NGModel. $ SetViewValue () dapat menerima parameter.
Value (String): Parameter nilai adalah nilai aktual yang ingin kami tetapkan ke instance NGModel.
Metode ini memperbarui $ viewValue lokal pada pengontrol dan memberikan nilai ke setiap fungsi $ parser (termasuk validator). Ketika nilainya diuraikan dan semua fungsi dalam pipa $ parser dipanggil, nilainya akan ditugaskan ke properti $ ModelValue dan diteruskan ke ekspresi yang disediakan oleh properti NG-model dalam instruksi. Akhirnya, setelah semua langkah selesai, semua pendengar di $ ViewChangeListeners akan dipanggil. Perhatikan bahwa memanggil $ setViewValue () saja tidak akan membangkitkan loop pencernaan baru, jadi jika Anda ingin memperbarui arahan, Anda perlu memicu pencernaan secara manual setelah mengatur $ viewValue. Metode $ setViewValue () cocok untuk mendengarkan acara khusus di arahan khusus (seperti menggunakan plugin jQuery dengan fungsi callback), kami ingin mengatur $ viewValue dan menjalankan loop pencernaan ketika panggilan balik dipanggil.
$ formatters
Nilai $ formatters adalah array fungsi yang disebut satu per satu dalam bentuk pipa ketika nilai model data berubah. Ini tidak berpengaruh pada pipa $ parser dan digunakan untuk memformat dan mengonversi nilai untuk ditampilkan dalam kontrol dengan nilai ini terikat.
$ viewChangeListeners
Nilai $ viewChangeListeners adalah array fungsi yang disebut satu per satu dalam bentuk pipa ketika nilai dalam tampilan berubah. Dengan $ viewChangeListeners, perilaku serupa dapat dicapai tanpa menggunakan $ watch. Karena nilai pengembalian diabaikan, fungsi -fungsi ini tidak perlu mengembalikan nilai.
$ error
Objek $ error memegang nama validator yang belum melewati verifikasi dan informasi kesalahan yang sesuai.
$ Pristine
Nilai $ Pristine adalah Boolean, yang dapat memberi tahu kami apakah pengguna telah memodifikasi kontrol.
$ kotor
Nilai $ kotor adalah kebalikan dari $ pristine, yang dapat memberi tahu kami apakah pengguna telah berinteraksi dengan kontrol.
$ valid
Nilai $ valid memberi tahu kami apakah ada kesalahan dalam kontrol saat ini. Nilainya salah ketika ada kesalahan, dan nilainya benar ketika tidak ada kesalahan.
$ tidak valid
Nilai $ tidak valid memberi tahu kita apakah ada setidaknya satu kesalahan dalam kontrol saat ini, dan nilainya adalah kebalikan dari $ valid.
Setelah mempelajari poin pengetahuan dasar, Anda perlu mempelajari metode penulisan verifikasi khusus secara mendalam. Setelah NG1.3, kemudahan penggunaan instruksi verifikasi telah ditingkatkan.
Di atas adalah penjelasan terperinci tentang contoh menggunakan formulir verifikasi AngularJS yang diperkenalkan kepada Anda oleh editor. Saya harap ini bisa membantu Anda. Saya akan terus memperbarui pengetahuan yang relevan dari formulir verifikasi AngularJS kepada Anda di masa depan. Harap perhatikan situs web Wulin.com!