Neueste Web-Entwicklung Tutorials
 

AngularJS Formular-Validierung

❮ Zurück Weiter Kapitel ❯

AngularJS können Eingangsdaten zu validieren.

Formular-Validierung

AngularJS bietet clientseitige Formularvalidierung.

AngularJS überwacht den Zustand der Form und Eingabefelder (Eingabe, Textfeld, wählen Sie), und können Sie den Benutzer über den aktuellen Stand informieren.

AngularJS hält auch Informationen darüber, ob sie berührt wurden, oder verändert oder nicht.

Sie können Standard verwenden HTML5 Eingabe zu bestätigen Attribute, oder Sie können Ihre eigene Validierungsfunktionen machen.

Hinweis Die clientseitige Validierung kann nicht allein eine sichere Benutzereingaben. Server-seitige Validierung ist auch notwendig.

Erforderlich

Verwenden Sie das HTML5 - Attribut required , um festzulegen , dass das Eingabefeld ausgefüllt werden müssen:

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>
Versuch es selber "

Email

Verwenden Sie die HTML5 - Typ email - email angeben , dass der Wert eine E-Mail sein muss:

Beispiel

Das Eingabefeld hat eine E-Mail zu 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>
Versuch es selber "

Formularstatus und Eingangsstatus

AngularJS aktualisiert ständig den Zustand der sowohl die Form und die Eingabefelder ein.

Eingabefelder haben folgende Staaten:

  • $untouched das Feld nicht berührt wurde noch
  • $touched Das Feld berührt wurde
  • $pristine Das Feld wurde noch nicht geändert
  • $dirty Das Feld wurde geändert
  • $invalid Der Feldinhalt nicht gültig ist
  • $valid Der Feldinhalt ist gültig

Sie sind alle Eigenschaften des Eingabefeldes und sind entweder true oder false .

Formulare haben folgende Staaten:

  • $pristine Keine Felder wurden noch geändert
  • $dirty Ein oder mehrere modifiziert wurden ,
  • $invalid Der Formularinhalt nicht gültig ist
  • $valid Der Formularinhalt ist gültig
  • $submitted das Formular abgeschickt wird

Sie sind alle Eigenschaften der Form, und sind entweder true oder false .

Sie können diese Zustände nutzen sinnvolle Nachrichten für den Benutzer zu zeigen. Beispiel: Wenn ein Feld erforderlich ist, und der Benutzer überlässt es leer ist, sollten Sie dem Benutzer eine Warnung geben:

Beispiel

Zeigen Sie eine Fehlermeldung, 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>
Versuch es selber "

CSS-Klassen

AngularJS fügt CSS-Klassen zu Formularen und Eingabefelder je nach ihren Zuständen.

Die folgenden Klassen werden hinzugefügt oder aus, Eingabefelder entfernt:

  • ng-untouched Das Feld wurde bisher noch nicht berührt
  • ng-touched Das Feld berührt wurde
  • ng-pristine Das Feld wurde noch nicht geändert
  • ng-dirty Das Feld geändert wurde
  • ng-valid Der Feldinhalt ist gültig
  • ng-invalid Der Feldinhalt nicht gültig
  • ng-valid- key Ein Schlüssel für jede Validierung. Beispiel: ng-valid-required , nützlich , wenn es mehr als eine Sache gibt , die überprüft werden müssen
  • ng-invalid- key Beispiel: ng-invalid-required

Die folgenden Klassen sind hinzugefügt oder aus diesem entfernt Formen:

  • ng-pristine keine Felder wurde noch nicht geändert
  • ng-dirty Ein oder mehrere Felder wurde geändert
  • ng-valid Der Formularinhalt ist gültig
  • ng-invalid Der Formularinhalt nicht gültig
  • ng-valid- key Ein Schlüssel für jede Validierung. Beispiel: ng-valid-required , nützlich , wenn es mehr als eine Sache gibt , die überprüft werden müssen
  • ng-invalid- key Beispiel: ng-invalid-required

Die Klassen entfernt werden , wenn der Wert , den sie vertreten , ist false .

Fügen Sie Stile für diese Klassen Ihre Anwendung zu geben, um eine bessere und intuitive Benutzeroberfläche.

Beispiel

Anwenden von Stilen, mit Standard-CSS:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>
Versuch es selber "

Formulare können auch gestylt werden:

Beispiel

Anwenden von Stilen für unmodifizierte (unberührte) bildet, und für modifizierte Formen:

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>
Versuch es selber "

Benutzerdefinierte Validierung

Um Ihre eigene Validierungsfunktion erstellen, ist ein wenig komplizierter. Sie haben eine neue Richtlinie zu Ihrer Anwendung hinzuzufügen, und innerhalb einer Funktion mit bestimmten angegebenen Argumente mit der Validierung befassen.

Beispiel

Erstellen Sie Ihre eigene Richtlinie, eine benutzerdefinierte Validierungsfunktion enthält, und beziehen sich auf sie unter Verwendung my-directive .

Das Feld wird nur dann 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>
Versuch es selber "

Beispiel erläutert:

In HTML wird die neue Richtlinie mit dem Attribut bezeichnet my-directive .

Im JavaScript starten wir eine neue Richtlinie namens durch Zugabe von myDirective .

Denken Sie daran, wenn eine Richtlinie zu benennen, müssen Sie ein Kamel Fall Namen verwenden, myDirective , aber wenn es aufgerufen wird , müssen Sie verwenden - getrennt Name, my-directive .

Kehren Sie dann ein Objekt , in dem Sie festlegen , dass wir benötigen ngModel , die die ngModelController ist.

Machen Sie eine Verknüpfungsfunktion , die einige Argumente annimmt, wo das vierte Argument, mCtrl , das ist ngModelController ,

Dann geben Sie eine Funktion, in diesem Fall den Namen myValidation , das ein Argument, dieses Argument ist der Wert des Eingangselementes.

Testen Sie, ob der Wert enthält den Buchstaben "e", und stellen Sie die Gültigkeit des Modells Controller entweder true oder false .

Endlich mCtrl.$parsers.push(myValidation); Die hinzuzufügen myValidation Funktion auf eine Reihe von anderen Funktionen, die jedesmal , wenn der Eingangswert ändert ausgeführt werden.

Validierung Beispiel

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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>
Versuch es selber "
Hinweis Das HTML - Formular Attribut novalidate wird verwendet Standard - Browser Validierung zu deaktivieren.

Beispiel erklärt

Die AngularJS Richtlinie ng-Modell bindet die Eingabeelemente zum Modell.

Das Model - Objekt hat zwei Eigenschaften: Benutzer und E - Mail.

Wegen ng-Show, die Spannweiten mit Farbe: rot werden nur dann angezeigt , wenn der Benutzer oder E - Mail $ schmutzig und $ ungültig ist.


❮ Zurück Weiter Kapitel ❯