Implementierungsmethode der AngularJS-Formularvalidierungsfunktion

Dieser Artikel stellt hauptsächlich die AngularJS-Formularüberprüfungsfunktion im Detail vor. Interessierte Freunde können darauf verweisen.

Es ist sehr wichtig, in Echtzeit visuelles Feedback geben zu können, basierend auf den Eingaben des Benutzers in das Formular. Im Kontext der Mensch-zu-Mensch-Kommunikation ist das Feedback durch die Formularvalidierung ebenso wichtig wie das Einholen korrekter Eingaben.

Die Formularvalidierung liefert nicht nur nützliches Feedback für Benutzer, sondern schützt unsere Webanwendungen auch vor Schäden durch böswillige oder falsche Eingaben. Wir müssen unser Bestes tun, um das Backend im Web-Frontend zu schützen.

AngularJS kann die HTML5-Formularvalidierungsfunktion mit seinen eigenen Validierungsanweisungen kombinieren, was sehr praktisch ist. AngularJS bietet viele Anweisungen zur Formularvalidierung.

<form name="form" novalidate>
  <label name="email">Your email</label>
  <input type="email" name="email" ng-model="email" placeholder="Email Address"/>
</form>

Um die Formularvalidierung zu verwenden, stellen Sie zunächst sicher, dass das Formular über ein Namensattribut wie im obigen Beispiel verfügt.

Alle Eingabefelder können einer grundlegenden Validierung unterzogen werden, z. B. maximale und minimale Länge usw. Diese Funktionen werden durch neue HTML5-Formularattribute bereitgestellt.

Wenn Sie das Standardvalidierungsverhalten des Browsers für das Formular blockieren möchten, können Sie dem Formularelement das Novalidate-Tag hinzufügen.

Erforderliche Felder

Eine Formulareingabe validieren Unabhängig davon, ob es ausgefüllt wurde, fügen Sie einfach das erforderliche HTML5-Tag zum Eingabefeldelement hinzu:

Hinweis: Das erforderliche Attribut gilt für die folgenden

<input type="text" required /></p>
<p>2. Mindestlänge ng-minleng="{number}"</p>
<p>Überprüfen Sie, ob die Textlänge der Formulareingabe beträgt größer als ein bestimmter Mindestwert, in Verwenden Sie die AngularJS-Direktive ng-minleng="{number}"</p>
<pre class="brush:php;toolbar:false"><input type="text" ng-minlength="5" />　

3 Maximale Länge ng-maxlength="{number}"

Verwenden Sie im Eingabefeld die AngularJS-Direktive ng-maxlength="{number}"

<input type="text" ng-maxlength="20" />

4, um zu überprüfen, ob die Textlänge der Formulareingabe kleiner oder gleich einem bestimmten Maximalwert ist ng-pattern="/PATTERN/"

Verwenden Sie ng-pattern="/PATTERN/", um sicherzustellen, dass die Eingabe mit dem angegebenen regulären Ausdruck übereinstimmt:

<input type="text" ng-pattern="[a-zA-Z]" />　　

5 >

Überprüfen Sie, ob der Eingabeinhalt eine E-Mail ist. Stellen Sie einfach den Eingabetyp wie folgt auf E-Mail ein:

<input type="email" name="email" ng-model="user.email" />

6. Zahl

Überprüfen Sie, ob der Eingabeinhalt eine Zahl ist. Setzen Sie den Eingabetyp auf Zahl:

<input type="number" name="age" ng-model="user.age" />

URL

Überprüfen Sie, ob der Eingabeinhalt eine URL ist, und legen Sie den Eingabetyp auf URL fest:

<input type="url" name="homepage" ng-model="user.facebook_url" />

Steuervariablen im Formular

Auf die Eigenschaften des Formulars kann im $scope-Objekt zugegriffen werden, zu dem sie gehören, und wir können auf das $scope-Objekt zugreifen, sodass JavaScript indirekt darauf zugreifen kann Formulareigenschaften im DOM. Mithilfe dieser Eigenschaften können wir (wie alles andere in AngularJS) in Echtzeit auf das Formular antworten. Zu diesen Eigenschaften gehören die folgenden. (Beachten Sie, dass auf diese Eigenschaften im folgenden Format zugegriffen werden kann.)

formName.inputFieldName.property

■ Unverändertes Formular

Dies ist eine boolesche Eigenschaft, mit der bestimmt wird, ob die Der Benutzer hat das Formular geändert. Wenn es nicht geändert wurde, ist der Wert wahr, wenn es geändert wurde, ist der Wert falsch

formName.inputFieldName.$pristine

■Modified form

As Solange der Benutzer das Formular geändert hat, gibt dieser Wert unabhängig davon, ob die Eingabe überprüft wurde, true zurück

formName.inputFieldName.$dirty

■Rechtsform

Dieser Boolesche Wert Das Attribut wird verwendet, um zu bestimmen, ob der Inhalt des Formulars legitim ist. Wenn der aktuelle Formularinhalt zulässig ist, ist der Wert des folgenden Attributs wahr:

formName.inputFieldName.$valid

■ Ungültiges Formular

Dieses boolesche Attribut wird verwendet, um Bestimmen Sie, ob der Inhalt des Formulars illegal ist. Wenn der aktuelle Formularinhalt illegal ist, ist der Wert des folgenden Attributs wahr:

formName.inputFieldName.$invalid

■ Fehler

Dies wird bereitgestellt von AngularJS Eine weitere sehr nützliche Eigenschaft: das $error-Objekt. Es enthält alle Validierungen für das aktuelle Formular sowie Informationen darüber, ob diese gültig sind oder nicht. Verwenden Sie die folgende Syntax, um auf diese Eigenschaft zuzugreifen:

formName.inputfieldName.$error

$parsers

Wenn der Benutzer mit dem Controller interagiert, und $setViewValue() in ngModelController Wenn die Methode aufgerufen wird, werden die Funktionen im Array $parsers nacheinander in einer Pipeline aufgerufen. Nachdem der erste $parse aufgerufen wurde, wird das Ausführungsergebnis an den zweiten $parse übergeben usw.

Diese Funktionen können den Eingabewert konvertieren oder die Rechtmäßigkeit des Formulars über $setValidity() festlegen Funktion.

Die Verwendung des $parsers-Arrays ist eine der Möglichkeiten, eine benutzerdefinierte Validierung zu implementieren.

Wenn wir beispielsweise sicherstellen möchten, dass der Eingabewert zwischen zwei bestimmten Werten liegt, können wir eine neue Funktion im Array $parsers pushen, die in der Verifizierungskette aufgerufen wird.

Der von jedem $parser zurückgegebene Wert wird an den nächsten $parser übergeben. Geben Sie undefiniert zurück, wenn Sie nicht möchten, dass das Datenmodell aktualisiert wird.

HTML

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>表单测试</title>
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="angular.1.2.13.js"></script>
</head>
<body>
  <p ng-controller="TestController">
    <form name="testForm">
      <input type="number" name="inputs" ng-test ng-model="obj.number">
      <span ng-show="testForm.inputs.$error.test">good</span>
      <span ng-hide="testForm.inputs.$error.test">bad</span>
      <p>{{ testForm.inputs.$valid }}</p>
      <p>{{ testForm.inputs.$invalid }}</p>
      <p>{{ obj.number }}</p>
    </form>
  </p>
  <script type="text/javascript" src="test5app.js"></script>
</body>
</html>

Javascript (test5app.js)

angular.module('myApp', []).controller('TestController', function($scope) {
  $scope.obj = {
    number: 34
  }
}).directive('ngTest', function() {
  return {
    require: '?ngModel',
    restrict: 'AE',
    link: function($scope, iElm, iAttrs, ngModel) {
      if (!ngModel) return;
      ngModel.$parsers.push(function(viewValue) {
        var num = parseInt(viewValue);
        if (num >= 0 && num < 99) {
          ngModel.$setValidity('test', true);
          return viewValue
        } else {
          ngModel.$setValidity('test', false);
          return undefined
        }
      })
    }
  }
});

Verwandte Empfehlungen:

Einführung in das Formularvalidierungs-Plug-in jquery.validate

Detaillierte Erläuterung der von AngularJS implementierten Formularvalidierungsfunktion, um den Fokus zu gewinnen und den Fokus zu verlieren

Detailliertes Beispiel für die Verifizierungsfunktion von jQuery zum Ausfüllen von Formularen

Das obige ist der detaillierte Inhalt vonImplementierungsmethode der AngularJS-Formularvalidierungsfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!