AngularJS -Eingangsprüfung
AngularJS -Formulare und -steuerungen können Eingabedaten überprüfen.
Überprüfung eingeben
In den vorherigen Kapiteln haben Sie über AngularJS -Formen und -kontrollen erfahren.
AngularJS -Formulare und -Kontrollen können Überprüfungsfunktionen bereitstellen und vor illegalen Daten warnen, die von Benutzern eingegeben wurden.
HINWEIS: Die Client -Überprüfung kann nicht die Sicherheit von Benutzereingabedaten sicherstellen, daher ist auch die Datenüberprüfung auf dem Server erforderlich.
Anwendungscode
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min ng-controller = "validatectrl" name = "myForm" novalidate> <p> Benutzername: <br> <Eingabe type = "text" name = "user" ng-model = "Benutzer" erforderlich> <span style = "color: rot" ng-show = "myform.user. ist erforderlich. </span> </span> </p> <p> E-Mail: <br> <Eingabe type = "E-Mail" name = "E-Mail" ng-model = "E-Mail" Erforderlich> <span style = "color: rot" ng-show = "myForm.email. $ schmutzig && myForm.Email. </span> <span ng-show = "myForm.email. $ error.email"> Illegale E-Mail-Adresse. </span> </span> </p> <p> <Eingabe type = "subieren" ng-disabled = "myForm.user. Funktion ($ scope) {$ scope.user = 'John Doe';Auslaufergebnisse:
Überprüfungsbeispiel
Benutzername:
Post:
Hinweis: Das HTML -Formattribut Novalidat wird verwendet, um die Standardprüfung der Browser zu deaktivieren.
Beispielanalyse
Die AngularJS NG-Model-Direktive wird verwendet, um Eingangselemente in das Modell zu binden.
Ein Modellobjekt hat zwei Eigenschaften: Benutzer und E -Mail.
Wir haben die NG-Show-Anweisung verwendet, Farbe: Rot wird nur angezeigt, wenn die Nachricht $ schmutzig oder $ ungültig ist.
| Eigentum | beschreiben |
|---|---|
| $ schmutzig | Es gibt Aufzeichnungen zum Ausfüllen des Formulars |
| $ gültig | Der Feldinhalt ist legal |
| $ ungültig | Der Feldinhalt ist illegal |
| $ Pristine | In der Form wird kein Aufzeichnung ausgefüllt |
Das obige ist eine Zusammenstellung von AngularJS -Eingangsprüfungsinformationen. Wir werden es später weiter ergänzen. Ich hoffe, es kann Schülern helfen, die studieren.