Verifikasi Input AngularJS
Formulir dan kontrol AngularJS dapat memverifikasi data input.
Masukkan verifikasi
Dalam bab -bab sebelumnya, Anda telah belajar tentang bentuk dan kontrol AngularJS.
Formulir dan kontrol AngularJS dapat memberikan kemampuan verifikasi dan memperingatkan data ilegal yang dimasukkan oleh pengguna.
Catatan: Verifikasi klien tidak dapat memastikan keamanan data input pengguna, sehingga verifikasi data pada server juga diperlukan.
Kode aplikasi
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip </head> </head> <body> <momfy> "head>" head> </head> </head> <body> <momy> "head>" head> </head> </head> <body> <h2 H2 ng-controller = "validatectrl" name = "myform" novalidate> <p> nama pengguna: <br> <input type = "text" name = "user" ng-model = "pengguna" diperlukan> <span style = "color: red" ng-show = "myform.user. $ kotor && myForm.user. $. ($"> "MyForm.user. $ Dirty && myForm.user. $. $. $. Nama pengguna diperlukan. </span> </span> </p> <p> Email: <br> <input type = "email" name = "email" ng-model = "email" diperlukan> <span style = "color: red" ng-show = "myform.email. $ Dirty && myform.email. $ tidak valid"> <span ng-show = myForm.eMail. $ MyForm. $ </span> <span ng-show = "myForm.email. $ error.email"> Alamat email ilegal. </span> </span> </p> <p> <input type = "kirim" ng-disabled = "myForm.user. $ Dirty && myForm.user. $ Invalid || myForm.email. $ Dirty && myForm.email. $ Invalid"> </p> </formule> <script> var app = myongule.moD. []); app.controller ('validatectrl', function ($ scope) {$ scope.user = 'John doe'; $ scope.email = '[email protected]';}); </script> </body> </html>Hasil Menjalankan:
Contoh verifikasi
nama belakang:
Surat:
Catatan: Atribut formulir HTML Novalidate digunakan untuk menonaktifkan verifikasi default browser.
Analisis contoh
Arahan AngularJS NG-Model digunakan untuk mengikat elemen input ke dalam model.
Objek model memiliki dua properti: pengguna dan email.
Kami menggunakan arahan ng-show, warna: merah ditampilkan hanya jika pesannya $ kotor atau $ tidak valid.
| milik | menggambarkan |
|---|---|
| $ kotor | Ada catatan untuk mengisi formulir |
| $ valid | Konten lapangan legal |
| $ tidak valid | Konten bidangnya ilegal |
| $ Pristine | Tidak ada catatan yang diisi dalam formulir |
Di atas adalah kompilasi informasi verifikasi input AngularJS. Kami akan terus melengkapi nanti. Saya berharap ini dapat membantu siswa yang belajar.