AngularJS Eingabevalidierung
AngularJS Formulare und Steuerelemente können Dateneingaben zu validieren.
Input-Validierung
In den vorangegangenen Abschnitten haben Sie das Wissen über AngularJS Formulare und Steuerelemente gelernt.
AngularJS Formulare und Steuerelemente können durch den Anwender eine Warnung eingegeben Validierungsfunktionen und illegale Daten bieten.
Stellen Sie sicher, dass der Kunde die Sicherheit der Benutzerdateneingabe nicht gewährleisten können, Datenvalidierung Server ist ebenfalls notwendig. |
Der Anwendungscode
<! DOCTYPE html>
<Html>
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<Body>
<H2> Validierung Beispiel </ h2 >
<Form ng-app = "myApp " ng-Controller = "validateCtrl"
name = "myForm" novalidate>
<P> Benutzername: <br>
<Input type = "text" name = "user" ng-Modell = "user" erforderlich>
<Span style = "color: red " ng-show = ".. MyForm.user $ schmutzig && myForm.user $ ungültig">
<Span ng-show = "myForm.user . $ Error.required"> Benutzername ist notwendig. </ Span>
</ Span>
</ P>
<P> E-mail: <br>
<Input type = "E - Mail" name = "email" ng-Modell = "E - Mail" erforderlich>
<Span style = "color: red " ng-show = ".. MyForm.email $ schmutzig && myForm.email $ ungültig">
<Span ng-show = "myForm.email . $ Error.required"> Mailbox ist ein Muss. </ Span>
<Span ng-show = "myForm.email . $ Error.email"> illegale Briefkästen. </ Span>
</ Span>
</ P>
<P>
<Input type = "submit"
ng-disabled = "myForm.user. $ schmutzig && myForm.user. $ ungültig ||
myForm.email. $ schmutzig && myForm.email. $ ungültig ">
</ P>
</ Form>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'validateCtrl', function ($ scope) {
$ 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> Validierung Beispiel </ h2 >
<Form ng-app = "myApp " ng-Controller = "validateCtrl"
name = "myForm" novalidate>
<P> Benutzername: <br>
<Input type = "text" name = "user" ng-Modell = "user" erforderlich>
<Span style = "color: red " ng-show = ".. MyForm.user $ schmutzig && myForm.user $ ungültig">
<Span ng-show = "myForm.user . $ Error.required"> Benutzername ist notwendig. </ Span>
</ Span>
</ P>
<P> E-mail: <br>
<Input type = "E - Mail" name = "email" ng-Modell = "E - Mail" erforderlich>
<Span style = "color: red " ng-show = ".. MyForm.email $ schmutzig && myForm.email $ ungültig">
<Span ng-show = "myForm.email . $ Error.required"> Mailbox ist ein Muss. </ Span>
<Span ng-show = "myForm.email . $ Error.email"> illegale Briefkästen. </ Span>
</ Span>
</ P>
<P>
<Input type = "submit"
ng-disabled = "myForm.user. $ schmutzig && myForm.user. $ ungültig ||
myForm.email. $ schmutzig && myForm.email. $ ungültig ">
</ P>
</ Form>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'validateCtrl', function ($ scope) {
$ Scope.user = 'John Doe';
$ Scope.email = '[email protected]';
});
</ Script>
</ Body>
</ Html>
Versuchen »
HTML - Formular - Attribute novalidate für die Standard Validierung des Browsers zu deaktivieren. |
Beispiele für analytische
AngularJS ng-Modell Anweisung wird verwendet , Eingabeelemente zum Modell zu binden.
Model - Objekt hat zwei Attribute: Benutzer und E - Mail.
Wir verwenden ng-Befehl show, Farbe: rot in der Nachricht ist nur $ schmutzig oder $ ungültige Anzeige.
Immobilien | Beschreibung |
---|---|
$ Schmutzige | Es gibt Formen Datensatz zu füllen |
$ Gültig | Feldinhalte legitim |
$ Ungültige | Feldinhalte sind illegal |
$ Pristine | Keine Formulare Datensatz zu füllen |