Informationen zur Implementierungscodeanalyse der AngularJS-Verifizierungsformularfunktion

In diesem Artikel wird hauptsächlich die AngularJS-Formularvalidierungsfunktion vorgestellt und anhand spezifischer Beispiele die Betriebsschritte, Implementierungsfähigkeiten und zugehörigen Vorsichtsmaßnahmen der AngularJS-Formularvalidierung analysiert , Freunde in Not können sich auf

Dieser Artikel beschreibt die AngularJS-Formularüberprüfungsfunktion anhand von Beispielen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Unter der Gerichtsbarkeit von AngularJS erstellt jedes Formular eine Instanz von ngFormController. Jede Eingabe im Formular erstellt eine ngModelController-Instanz unter dieser Instanz, um das Verhalten jeder Eingabe zu steuern.

Beginnen Sie zunächst mit einer einfachen Verifizierung.

ngModelController von AngularJs bietet mehrere Eigenschaften: $pristine;$dirty;$valid;$invalid;$error

pristine: Das Formular hat sich nicht geändert.
dirty: Das Formular hat sich geändert.
valid: Alle Kontrollen entsprechen den Validierungsregeln.
invalid: Mindestens eine Kontrolle entspricht nicht den Validierungsregeln.
error: Es liegt ein Fehler vor, aber ich weiß nicht, was falsch ist.

Erstellen Sie ein Formular wie folgt:

<form name="userForm" method="#" action="#">
  <label for="name">用户名1</label>
  <input id="name" name="name" type="text" ng-model="users.name" pattern="^\w{6,18}$" required>
  <span ng-show="userForm.name.$error.pattern">用户名必须XXXX</span>
</form>

Zunächst muss jedes Formular einen eigenen Namen haben. Verwenden Sie diesen Namen, um die Eingabe unter Ihnen zu steuern. Dann muss jedes Eingabe-Tag einen eigenen Namen haben. Der Name ist ein entscheidender Schritt und wird verwendet, um die einzelnen Eingaben und damit verschiedene ngModelController zu identifizieren. Verwenden Sie Muster, um Ihre eigenen Regeln für reguläre Ausdrücke festzulegen. Verwenden Sie $error, um zu überprüfen, ob der reguläre Ausdruck korrekt ist. Und weisen Sie es der ng-show-Direktive zu. Wenn ein Fehler vorliegt, gibt der gesamte $error „true“ zurück und die eingestellten Eingabeaufforderungsinformationen werden angezeigt, bis der reguläre Ausdruck erfolgreich ist. $error gibt „false“ zurück und ng-show blendet sie aus.

Das obige einfache Beispiel erfordert nicht, dass Sie das Verhalten des Controllers selbst zurücksetzen, alles ist die Standardeinstellung von AngularJ. Sie können sehen, dass der Beurteilungscode in ng-show später tatsächlich von JS vervollständigt werden kann, sodass Sie den spezifischen Prozess von ngModelController sehen können.

<!--html-->
<form name="userForm" ng-controller="main" method="#" action="#">
  <label for="name">用户名1</label>
  <input id="name" name="name" type="text" ng-model="users.name" pattern="^\w{6,18}$" required>
  <span style="color:red" ng-show="showError(userForm.name,&#39;pattern&#39;)">用户名必须XX</span>
  <span style="color:green" ng-show="showSuccess(userForm.name)">成功！</span>
  <!--对按钮进行动态锁定-->
  <button class="btn btn-primary btn-lg" ng-disabled="submit(userForm)">SAVE</button>
</form>

/*JS*/
app.controller("main",function($scope){
  $scope.showError=function(ngModelController,abc){
    return ngModelController.$error[abc];
  };
  $scope.showSuccess=function(ngModelController){
    return ngModelController.$valid; /*至少有1错误，返回false，无错误，返回true*/
  };
   $scope.submit=function(ngFormController){
    return ngFormController.$invalid; /*valid的取反*/
  };
});

Die Beurteilung erfolgt direkt im ngModelController im Controller. Darin liegt eine Gefahr, das heißt, es gibt keine Parameter zur Beurteilung von Attributen wie $valid. Um $error zu beurteilen, müssen Sie angeben, „was beurteilt werden soll“. Ich habe ihm einen eigenen regulären Ausdruck übergeben.

AngularJs kann auch die Senden-Schaltfläche des Formulars „sperren“. Es ist jedoch zu beachten, dass der Controller, der BUTTON entspricht, zu diesem Zeitpunkt nicht mehr der ngModelController für eine bestimmte Eingabe ist, sondern der ngFormController für das gesamte Formular. Daher dient das darin enthaltene $invalid dazu, festzustellen, ob bei allen ein Problem vorliegt Eingaben, und alles ist in Ordnung, wenn .

Überlegung: Können reguläre Ausdrücke oder Mindestlängenbeschränkungen wie diese in JS-Dateien geschrieben werden?

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