Heim > Artikel > Web-Frontend > AngularJS implementiert form validation_AngularJS

AngularJS implementiert form validation_AngularJS

WBOYOriginal: 2016-05-16 16:17:48992Durchsuche

Obwohl ich kein Front-End-Programmierer bin, verstehe ich, wie wichtig es ist, eine Überprüfung im Front-End durchzuführen.

Denn auf diese Weise kann das Backend eine Verschnaufpause einlegen und im Vergleich zum Backend kann das Frontend tatsächlich die Zufriedenheit des Benutzers verbessern.

AngularJS bietet eine sehr praktische Formularvalidierungsfunktion, die hier aufgezeichnet wird.

Beginnen Sie zunächst mit dem folgenden Code

Code kopieren Der Code lautet wie folgt:

Einige Validierungsoptionen für Eingabe-Tags, die normalerweise in Verbindung mit HTML5-Tags verwendet werden.

Erforderlich

Länge

Verwenden Sie den Befehl ng-minlength/ng-maxlength

Spezifisches Format
Zum Beispiel E-Mail, URL, Nummer, setzen Sie einfach den Typ auf den entsprechenden Typ, zum Beispiel:

Code kopieren Der Code lautet wie folgt:

Mustervergleich

Verwenden Sie die Direktive ng-pattern, zum Beispiel:

Code kopieren Der Code lautet wie folgt:

Formulareigenschaften, die die Bearbeitung des Formulars erleichtern

makellos/schmutzig

Gibt an, ob es geändert wurde, z. B.

Code kopieren Der Code lautet wie folgt:

Zugriff im formName.fieldName.$pristine-Modus, Eingabe muss eine ng-model-Deklaration haben.

Code kopieren Der Code lautet wie folgt:

gültig/ungültig

gibt an, ob die Verifizierung bestanden wurde.

Code kopieren Der Code lautet wie folgt:

$error

Formularüberprüfungsinformationen. Die entsprechenden Informationen werden zurückgegeben, wenn die Überprüfung fehlschlägt.

AngularJS stellt entsprechende CSS-Klasse für den Formularstatus bereit

Code kopieren Der Code lautet wie folgt:

.ng-pristine

.ng-dirty

.ng-valid

.ng-ungültig

Stellen Sie zum Beispiel sicher, dass die Verifizierung „bestanden“ grün und „nicht bestanden“ rot ist:

Code kopieren Der Code lautet wie folgt:

input.ng-valid {

Farbe: grün;

}

input.ng-invalid {

Farbe: grün;

}

Im angegebenen Beispiel wird nur eine E-Mail-Bestätigung geschrieben. Wenn Sie mehrere Felder, mehrere verschiedene Eingabeaufforderungen und mehrere Ereignisse hinzufügen, wird der Code unübersichtlich.

Das ist eigentlich nicht zu empfehlen, wir haben einen besseren Weg.
Verwenden Sie einfach angle-messages.js

Vergessen Sie zunächst nicht diese beiden Schritte

Code kopieren Der Code lautet wie folgt:

angle.module('myApp', ['ngMessages'])

Okay, ersetzen Sie zuerst diese Duplikate durch ng-messages und ng-message. Das obige Beispiel wird:

Code kopieren Der Code lautet wie folgt:

E-Mail:
type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" erforderlich />

E-Mail ist erforderlich.

Ungültige E-Mail-Adresse.

Mindestlänge 10

maximale Länge 50

Es gibt keine Änderung an der Funktionalität, nur dass alle doppelten Codes entfernt wurden.

Achten Sie auf die Unterscheidung zwischen ng-messages und ng-message. Fühlt es sich ein bisschen wie with() an? Das folgende ng-messages-multiple wird hier verwendet, um mehrere Eingabeaufforderungen gleichzeitig anzuzeigen.

Aber das ist immer noch nicht gut genug. Selbst wenn der Inhalt in ng-message weggelassen wird, kommt es immer noch zu Duplikaten, wenn in mehreren Feldern eine erforderliche Überprüfung vorhanden ist.

Wenn außerdem die Formulare auf verschiedenen Seiten alle den gleichen Inhalt haben, kommt es immer häufiger zu wiederholten Bestätigungsaufforderungen.
Um dieses Problem zu lösen, können wir die Direktive ng-messages-include verwenden.
Diese Anweisung wird verwendet, um auf eine Vorlage zu verweisen. Das obige Beispiel wird beispielsweise zu:

Code kopieren Der Code lautet wie folgt:

E-Mail:
type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" erforderlich />

Es ist nicht kompliziert, fügen wir noch ein paar Dinge hinzu.
Um die Eingabeaufforderung benutzerfreundlicher (?) zu gestalten, versuchen wir, den Effekt zu erzielen, dass die Eingabeaufforderung erscheint, nachdem der Cursor den Cursor verlässt.
Zu diesem Zeitpunkt wird es viel bequemer sein, Anweisungen zu verwenden. Hier werden wir zunächst auf einige Inhalte im Zusammenhang mit Anweisungen eingehen.

Lass es uns zuerst ausführen:

Code kopieren Der Code lautet wie folgt:

var myApp = angle.module('myApp',[])
.controller('validationController', ['$scope',function($scope) {
          $scope.user = 'Kavlez';
$scope.email = 'sweet_dreams@aliyun.com';
}])
.directive('hintOnBlur', [function() {
         return {
             require: 'ngModel',
              Link: function(scope, element, attrs, ctrl) {
ctrl.focused = false;
                      element.bind('focus', function(evt) {
Scope.$apply(function() {ctrl.focused = true;});
                    }).bind('blur', function(evt) {
Scope.$apply(function() {ctrl.focused = false;});
                });
            }
}
}]);

Hier verwenden wir „fokussiert“, um mithilfe der hintOnBlur-Direktive zu bestimmen, ob sich der Cursor auf einem bestimmten Attribut befindet.

Das Formular wird ebenfalls entsprechend geändert. Die Verwendungsmethode ist wie folgt:

Code kopieren Der Code lautet wie folgt:

Fügen Sie das Urteil „fokussiert“ zu ng-show hinzu. Wenn es falsch ist, wird eine Meldung angezeigt.

So sieht es jetzt aus.

Passen Sie die Überprüfungsmethode und Gültigkeit an, bei der auch Anweisungen verwendet werden.

Überprüfen Sie, ob die eingegebene E-Mail-Adresse bereits belegt ist. Hier ist eine einfache Simulation:

Code kopieren Der Code lautet wie folgt:

.directive('isAlreadyTaken', function() {
    zurück {
        erfordern: 'ngModel',
        Link: function(scope, ele, attrs, ctrl) {
            ctrl.$parsers.push(function(val) {
                ctrl.$setValidity('emailAvailable', false);
                var emailTable = [
                    'K@gmail.com',
                    'a@gmail.com',
                    'v@gmail.com',
                    'l@gmail.com',
                    'e@gmail.com',
                    'z@gmail.com'];
                für (var i=0;i                     if(val==emailTable[i])
                        zurück;
                ctrl.$setValidity('emailAvailable', true);
                Rückgabewert;
            })
        }
    }
})

Eingabe元素中加上is-already-taken属性，并且再加一个ng-message:

复制代码代码如下:

Bereits vergeben! Versuchen Sie es mit anderen E-Mail-Adressen!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js-Methode, um zu bestimmen, auf welche linke, mittlere oder rechte Maustaste geklickt wurde_Javascript-FähigkeitenNächster Artikel：js-Methode, um zu bestimmen, auf welche linke, mittlere oder rechte Maustaste geklickt wurde_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen