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>
Nach dem Login kopieren
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" /> Nach dem Login kopieren
3 Maximale Länge ng-maxlength="{number}"
Verwenden Sie im Eingabefeld die AngularJS-Direktive ng-maxlength="{number}"
<input type="text" ng-maxlength="20" />
Nach dem Login kopieren
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]" />
Nach dem Login kopieren
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" />
Nach dem Login kopieren
<input type="number" name="age" ng-model="user.age" />
Nach dem Login kopieren
<input type="url" name="homepage" ng-model="user.facebook_url" />
Nach dem Login kopieren
■ 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>Nach dem Login kopieren
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
}
})
}
}
});Nach dem Login kopieren
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!
