AngularJS-Formularvalidierungsmethoden

Anjularjs-Formularvalidierung

Es ist sehr wichtig, in Echtzeit visuelles Feedback basierend auf den Eingaben des Benutzers in das Formular geben zu können. 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 ein Namensattribut wie im obigen Beispiel hat.

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 das Novalidate-Tag zum Formularelement hinzufügen

1. Erforderlich

Um zu überprüfen, ob eine Formulareingabe ausgefüllt wurde, fügen Sie einfach das erforderliche HTML5-Tag zum Eingabefeldelement hinzu:

Hinweis: Das erforderliche Attribut gilt für das folgende < Eingabetypen: Text, Suche, URL, Telefon, E-Mail, Passwort, Datumsauswahl, Nummer, Kontrollkästchen, Radio und Datei

<input type="text" required />

2. Mindestlänge ng-minleng="{number}"

Um zu überprüfen, ob die im Formular eingegebene Textlänge größer als ein bestimmter Mindestwert ist, verwenden Sie die AngularJS-Direktive ng-minleng="{ number}" <🎜 im Eingabefeld >

<input type="text" ng-minlength="5" />

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

Überprüfen Sie, ob die Textlänge der Formulareingabe kleiner oder gleich einem bestimmten Maximalwert ist, indem Sie die AngularJS-Direktive ng-maxlength="{number}" im Eingabefeld

< verwenden 🎜>

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

　4. Mustervergleich 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. E-Mail

Um zu überprüfen, ob es sich bei dem Eingabeinhalt um eine E-Mail handelt, legen Sie einfach den Eingabetyp auf fest Senden Sie eine E-Mail wie folgt:

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

　6. Zahlen

Überprüfen Sie, ob der Eingabeinhalt eine Zahl ist, und legen Sie den Eingabetyp fest zur Nummer:

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

7. URL

Überprüfen Sie, ob es sich bei dem Eingabeinhalt um eine URL handelt, und stellen Sie den Eingabetyp auf ein URL:

<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 denen sie gehören, und wir können auf das $scope-Objekt zugreifen, sodass JavaScript indirekt auf Formulareigenschaften im DOM zugreifen kann. 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 mit dem folgenden Format zugegriffen werden kann.)

formName.inputFieldName.property

■Unverändertes Formular

Dies ist eine boolesche Eigenschaft, Used um festzustellen, ob der Benutzer das Formular geändert hat. Wenn es nicht geändert wurde, ist der Wert wahr, wenn es geändert wurde, ist der Wert falsch

■ Modifizierte Form

formName.inputFieldName.$pristine

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

■Rechtsform

formName.inputFieldName.$dirty

Dies Das boolesche 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:

■ Unzulässige Form

formName.inputFieldName.$valid

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

■ Fehler

formName.inputFieldName.$invalid

Dies ist eine weitere sehr nützliche Funktion von AngularJS Nützliche Eigenschaften: $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 ngModelController Wenn die Methode $setViewValue() aufgerufen wird, werden die Funktionen im Array $parsers nacheinander in Form 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.

　　例如，假设我们想要确保输入值在某两个数值之间，可以在 $parsers 数组中入栈一个新的函数，这个函数会在验证链中被调用。

　　每个 $parser 返回的值都会被传入下一个 $parser 中。当不希望数据模型发生更新时返回undefined 。

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
                }
            })
        }
    }
});

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