AngularJS-Formularvalidierung
AngularJS kann Eingabedaten validieren.
Formularvalidierung
AngularJS bietet clientseitige Formularvalidierung.
AngularJS überwacht den Status des Formulars und der Eingabefelder (input, textarea, select) und lässt Sie den Benutzer über den aktuellen Status benachrichtigen.
AngularJS enthält auch Informationen darüber, ob sie berührt oder modifiziert wurden oder nicht.
Sie können Standard-HTML5-Attribute verwenden, um Eingaben zu validieren, oder Sie können Ihre eigenen Validierungsfunktionen erstellen.
Die clientseitige Validierung allein kann Benutzereingaben nicht sichern. Eine serverseitige Validierung ist ebenfalls erforderlich.
Erforderlich
Verwenden Sie das HTML5-Attribut required, um festzulegen, dass das Eingabefeld ausgefüllt werden muss:
Beispiel
Das Eingabefeld ist erforderlich:
<form name="myForm">
<input name="myInput" ng-model="myInput"
required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Verwenden Sie den HTML5-Typ email, um anzugeben, dass der Wert eine E-Mail sein muss:
Beispiel
Das Eingabefeld muss eine E-Mail sein:
<form name="myForm">
<input name="myInput" ng-model="myInput"
type="email">
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Formularstatus und Eingabestatus
AngularJS aktualisiert ständig den Status sowohl des Formulars als auch der Eingabefelder.
Eingabefelder haben folgende Zustände:
$untouchedDas Feld wurde noch nicht berührt$touchedDas Feld wurde berührt$pristineDas Feld wurde noch nicht geändert$dirtyDas Feld wurde geändert$invalidDer Feldinhalt ist ungültig$validDer Feldinhalt ist gültig
Sie sind alle Eigenschaften des Eingabefelds und entweder true
oder false.
Formulare haben folgende Zustände:
$pristineEs wurden noch keine Felder geändert$dirtyEine oder mehrere wurden geändert$invalidDer Formularinhalt ist ungültig$validDer Formularinhalt ist gültig$submittedDas Formular wird übermittelt
Sie sind alle Eigenschaften des Formulars und entweder true
oder false.
Sie können diese Status verwenden, um dem Benutzer aussagekräftige Nachrichten anzuzeigen. Beispiel: Wenn ein Feld erforderlich ist und der Benutzer es leer lässt, sollten Sie dem Benutzer eine Warnung geben:
Beispiel
Fehlermeldung anzeigen, wenn das Feld berührt wurde UND leer ist:
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched
&& myForm.myName.$invalid">The name is required.</span>
CSS-Klassen
AngularJS fügt Formularen und Eingabefeldern je nach Zustand CSS-Klassen hinzu.
Die folgenden Klassen werden zu Eingabefeldern hinzugefügt oder daraus entfernt:
ng-untouchedDas Feld wurde noch nicht berührtng-touchedDas Feld wurde berührtng-pristineDas Feld wurde noch nicht geändertng-dirtyDas Feld wurde geändertng-validDer Feldinhalt ist gültigng-invalidDer Feldinhalt ist ungültigng-valid-keyEin Schlüssel für jede Validierung. Beispiel:ng-valid-required, nützlich, wenn mehr als eine Sache validiert werden mussng-invalid-keyBeispiel:ng-invalid-required
Die folgenden Klassen werden Formularen hinzugefügt oder daraus entfernt:
ng-pristineEs wurden noch keine Felder geändertng-dirtyEin oder mehrere Felder wurden geändertng-validDer Formularinhalt ist gültigng-invalidDer Formularinhalt ist ungültigng-valid-keyEin Schlüssel für jede Validierung. Beispiel:ng-valid-required, nützlich, wenn mehr als eine Sache validiert werden mussng-invalid-keyBeispiel:ng-invalid-required
Die Klassen werden entfernt, wenn der Wert, den sie darstellen, false.
Fügen Sie Stile für diese Klassen hinzu, um Ihrer Anwendung eine bessere und intuitivere Benutzeroberfläche zu verleihen.
Beispiel
Wenden Sie Stile mit Standard-CSS an:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
Formulare können auch gestaltet werden:
Beispiel
Wenden Sie Stile für unveränderte (ursprüngliche) Formulare und für modifizierte Formulare an:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
Benutzerdefinierte Validierung
Eine eigene Validierungsfunktion zu erstellen ist etwas kniffliger; Sie müssen Ihrer Anwendung eine neue Direktive hinzufügen und sich mit der Validierung innerhalb einer Funktion mit bestimmten angegebenen Argumenten befassen.
Beispiel
Erstellen Sie Ihre eigene Direktive, die eine benutzerdefinierte Validierungsfunktion enthält, und verweisen Sie darauf, indem Sie verwenden my-directive.
Das Feld ist nur gültig, wenn der Wert das Zeichen "e" enthält:
<form name="myForm">
<input name="myInput" ng-model="myInput" required
my-directive>
</form>
<script>
var app = angular.module('myApp',
[]);
app.directive('myDirective', function() {
return {
require: 'ngModel',
link: function(scope, element,
attr, mCtrl) {
function myValidation(value)
{
if (value.indexOf("e") > -1)
{
mCtrl.$setValidity('charE',
true);
} else {
mCtrl.$setValidity('charE', false);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
};
});
</script>
Beispiel erklärt:
In HTML wird auf die neue Direktive mit dem Attribut verwiesen
my-directive.
Im JavaScript beginnen wir mit dem Hinzufügen einer neuen Direktive namens myDirective.
Denken Sie daran, dass Sie beim Benennen einer Direktive einen Camel-Case-Namen verwenden müssen,
myDirective, aber wenn Sie sie aufrufen, müssen Sie einen -getrennten Namen verwenden,
my-directive.
Geben Sie dann ein Objekt zurück, in dem Sie angeben, dass wir ngModelngModelController benötigen.
Erstellen Sie eine Verknüpfungsfunktion, die einige Argumente akzeptiert, wobei das vierte Argument, mCtrl, das ngModelController,
Geben Sie dann eine Funktion an, in diesem Fall mit dem Namen myValidation, die ein Argument akzeptiert, dieses Argument ist der Wert des Eingabeelements.
Testen Sie, ob der Wert den Buchstaben „e“ enthält, und setzen Sie die Gültigkeit des Modellcontrollers entweder auf trueoder false.
Zuletzt mCtrl.$parsers.push(myValidation);wird die Funktion zu einem Array anderer Funktionen hinzugefügt
myValidation, die jedes Mal ausgeführt werden, wenn sich der Eingabewert ändert.
Validierungsbeispiel
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp"
ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user"
required>
<span style="color:red" ng-show="myForm.user.$dirty &&
myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username
is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span
style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl',
function($scope) {
$scope.user = 'John Doe';
$scope.email = '[email protected]';
});
</script>
</body>
</html>
Das HTML-Formularattribut novalidate wird verwendet, um die standardmäßige Browservalidierung zu deaktivieren.
Beispiel erklärt
Die AngularJS-Direktive ng-model bindet die Eingabeelemente an das Modell.
Das Modellobjekt hat zwei Eigenschaften: user und email .
Aufgrund von ng-show werden die Spans mit color:red nur angezeigt, wenn der Benutzer oder die E-Mail $dirty und $invalid ist .