Latest web development tutorials

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.

Note 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>

Versuchen »

Note 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