AngularJS validasi input
AngularJS bentuk dan kontrol dapat memvalidasi input data.
validasi input
Pada bagian sebelumnya, Anda telah belajar pengetahuan tentang AngularJS bentuk dan kontrol.
AngularJS bentuk dan kontrol dapat menawarkan fitur validasi dan data ilegal yang dimasukkan oleh pengguna peringatan.
 | Pastikan bahwa klien tidak dapat menjamin keamanan entri data pengguna, server yang validasi data juga diperlukan. |
|---|
kode aplikasi
<! DOCTYPE html>
<Html>
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<Body>
<H2> Validasi Contoh </ h2 >
<Form ng-app = "myApp " ng-controller = "validateCtrl"
name = "myForm" novalidate>
<P> Username: Situs
<Input type = "text" name = "user" ng-model = "user" diperlukan>
<Span style = "color: red " ng-show = ".. MyForm.user $ kotor && myForm.user $ valid">
<Span ng-show = "myForm.user . $ Error.required"> nama pengguna diperlukan. </ Span>
</ Span>
</ P>
<P> E-mail: Situs
<Input type = "email" nama = "email" ng-model = "email" yang diperlukan>
<Span style = "color: red " ng-show = ".. MyForm.email $ kotor && myForm.email $ valid">
<Span ng-show = "myForm.email . $ Error.required"> kotak adalah suatu keharusan. </ Span>
<Span ng-show = "myForm.email . $ Error.email"> kotak surat ilegal. </ Span>
</ Span>
</ P>
<P>
<Input type = "submit"
ng-disabled = "myForm.user $. kotor && myForm.user. $ valid ||
myForm.email. $ kotor && myForm.email. $ valid ">
</ P>
</ Form>
<Script>
var aplikasi = angular.module ( 'myApp', []);
app.controller ( 'validateCtrl', function ($ lingkup) {
$ Scope.user = 'John Doe';
$ Scope.email = '[email protected]';
});
</ Script>
</ Body>
</ Html>
<Html>
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<Body>
<H2> Validasi Contoh </ h2 >
<Form ng-app = "myApp " ng-controller = "validateCtrl"
name = "myForm" novalidate>
<P> Username: Situs
<Input type = "text" name = "user" ng-model = "user" diperlukan>
<Span style = "color: red " ng-show = ".. MyForm.user $ kotor && myForm.user $ valid">
<Span ng-show = "myForm.user . $ Error.required"> nama pengguna diperlukan. </ Span>
</ Span>
</ P>
<P> E-mail: Situs
<Input type = "email" nama = "email" ng-model = "email" yang diperlukan>
<Span style = "color: red " ng-show = ".. MyForm.email $ kotor && myForm.email $ valid">
<Span ng-show = "myForm.email . $ Error.required"> kotak adalah suatu keharusan. </ Span>
<Span ng-show = "myForm.email . $ Error.email"> kotak surat ilegal. </ Span>
</ Span>
</ P>
<P>
<Input type = "submit"
ng-disabled = "myForm.user $. kotor && myForm.user. $ valid ||
myForm.email. $ kotor && myForm.email. $ valid ">
</ P>
</ Form>
<Script>
var aplikasi = angular.module ( 'myApp', []);
app.controller ( 'validateCtrl', function ($ lingkup) {
$ Scope.user = 'John Doe';
$ Scope.email = '[email protected]';
});
</ Script>
</ Body>
</ Html>
Coba »
| bentuk HTML atribut novalidate untuk menonaktifkan validasi default browser. |
|---|
Contoh analisis
AngularJS instruksi ng-model yang digunakan untuk mengikat elemen masukan untuk model.
objek model memiliki dua atribut: user dan email.
Kami menggunakan ng-perintah show, warna: merah dalam pesan hanya $ display valid kotor atau $.
| milik | deskripsi |
|---|---|
| $ Kotor | Ada bentuk untuk mengisi record |
| $ Valid | Isi bidang yang sah |
| $ valid | Isi bidang ilegal |
| $ Pristine | Tidak ada bentuk untuk mengisi record |