Obwohl ich kein Front-End-Programmierer bin, verstehe ich, wie wichtig es ist, eine gute Überprüfung am Front-End zu leisten.
Denn auf diese Weise kann das Backend mehr Atemzug nehmen und im Vergleich zum Backend kann das Frontend tatsächlich das Glücksgefühl des Benutzers verbessern.
AngularJS bietet eine sehr bequeme Funktion zur Überprüfung des Formulars und zeichnet sie hier auf.
Beginnen Sie zunächst mit dem folgenden Code
Die Codekopie lautet wie folgt:
<Form ng-App = "MyApp" ng-controller = "validationController" name = "MainForm" Novalidat>
<P> E -Mail:
<Eingabe type = "E-Mail" name = "E-Mail" ng-model = "E-Mail" erforderlich>
<span style = "color: rot" ng-show = "mainform.email.
<span ng-show = "MainForm.Email.
<span ng-show = "MainForm.Email. $ error.email"> Ungültige E-Mail-Adresse. </span>
</span>
</p>
<p>
<Eingabe type = "Senden" ng-disabled = "MainForm. $ ungültig">
</p>
</form>
<Script>
Angular.module ('MyApp', [])
.Controller ('validationController', ['$ scope', function ($ scope) {
$ scope.user = 'kavlez';
$ scope.email = '[email protected]';
}]);
</script>
Einige Überprüfungsoptionen für Eingabe -Tags werden normalerweise mit HTML5 -Tags verwendet.
Erforderlich
<Eingabe type = "text" erforderlich />
Länge
Verwenden Sie die Richtlinie ng-minlength/ng-maxlength
<Eingabe type = "text" ng-minLength = "5" />
Spezifisches Format
Setzen Sie beispielsweise E -Mail, URL und Nummer einfach den Typ auf den entsprechenden Typ, z. B. auf den entsprechenden Typ:
Die Codekopie lautet wie folgt:
<Eingabe type = "E-Mail" name = "E-Mail" ng-model = "user.email" />
<Eingabe type = "number" name = "ay" ng-model = "user.age" />
<Eingabe type = "url" name = "homepage" ng-model = "user.facebook_url" />
Musteranpassung
Verwenden Sie zum Beispiel die Richtlinie NG-Muster:
Die Codekopie lautet wie folgt:
<Eingabe type = "text" ng-pattern = "[az]" />
Formen Sie Eigenschaften, diese Eigenschaften erleichtern das Betrieb mit Formularen
makellos/schmutzig
Gibt an, ob es modifiziert wurde, z.
Die Codekopie lautet wie folgt:
<Formular name = "MainForm" ng-controller = "orderController">
<Eingabe type = "E-Mail" name = "useremail" ng-model = "myemail" />
{{MainForm.Useremail. $ Pristine}}
{{MainForm.Useremail. $ Dirty}}
</form>
Zugriff in Formname.fieldName.
Die Codekopie lautet wie folgt:
gültig/ungültig
Zeigt an, ob es die Überprüfung übergeht.
Die Codekopie lautet wie folgt:
$ Fehler
Formularverifizierungsinformationen und die entsprechenden Informationen werden zurückgegeben, wenn die Überprüfung fehlschlägt.
AngularJS liefert die CSS -Klasse entsprechend für den Formularstatus
Die Codekopie lautet wie folgt:
.NG-Pristine
.ng-dirty
.ng-valid
.ng-invalid
Lassen Sie beispielsweise Verifizierung grün passieren und scheitern Sie rot:
Die Codekopie lautet wie folgt:
input.ng-valid {
Farbe: grün;
}
input.ng-invalid {
Farbe: grün;
}
Im angegebenen Beispiel ist nur eine E -Mail -Überprüfung so viel geschrieben. Wenn Sie ein paar Felder hinzufügen, einige verschiedene Eingabeaufforderungen hinzufügen und einige Ereignisse hinzufügen, wird der Code chaotisch.
Tatsächlich wird nicht empfohlen, dies zu tun, wir haben einen besseren Weg.
Es soll Angular-Messages.js verwenden
Vergessen Sie zunächst nicht diese beiden Schritte
Die Codekopie lautet wie folgt:
<script src = "Angular-messages.js"> </script>
Angular.module ('MyApp', ['ngmessages'])
OK, ersetzen Sie zuerst diese Duplikate durch ng-messages und ng-message, und das obige Beispiel wird:
Die Codekopie lautet wie folgt:
<Formular ng-controller = "validationController" name = "MainForm">
<P> E -Mail:
<Eingabe
Typ = "E-Mail" name = "E-Mail" ng-model = "myemail" ng-minLength = "3" ng-maxLength = "50" Erforderlich />
<div style = "color: rot" ng-messages = "MainForm.Email. $ error" ng-messages-multiple>
<p ng-message = "Erforderlich"> E-Mail ist erforderlich. </p>
<p ng-message = "E-Mail"> Ungültige E-Mail-Adresse. </p>
<p ng-message = "minLength"> min Länge 10 </p>
<p ng-message = "maxLength"> Maximale Länge 50 </p>
</div>
</p>
<p>
<Eingabe type = "Senden" ng-disabled = "MainForm. $ ungültig" />
</p>
</form>
Es gibt keine Funktionsänderung, nur der doppelte Code wurde entfernt.
Achten Sie auf die Unterscheidung zwischen NG-Messasges und NG-Messages. Fühlt es sich ein bisschen wie mit () an? Das dahinter stehende NG-Messages-Multiple wird verwendet, damit mehrere Eingabeaufforderungen gleichzeitig angezeigt werden.
Aber das ist immer noch nicht gut genug. Auch wenn der Inhalt in NG-Message weggelassen wird, wird in mehreren Feldern eine Duplikation vorliegen, wenn die erforderliche Überprüfung vorliegt.
Darüber hinaus werden immer wieder wiederholte Überprüfungsanforderungen erfolgen, wenn Formulare auf verschiedenen Seiten denselben Inhalt beinhalten.
Um dieses Problem zu lösen, können wir die NG-Messages-Include-Richtlinie verwenden.
Diese Richtlinie wird verwendet, um Vorlagen zu verweisen. Zum Beispiel wird das obige Beispiel:
Die Codekopie lautet wie folgt:
<Formular ng-controller = "validationController" name = "MainForm">
<P> E -Mail:
<Eingabe
Typ = "E-Mail" name = "E-Mail" ng-model = "myemail" ng-minLength = "3" ng-maxLength = "50" Erforderlich />
<div style = "color: rot" ng-messages = "MainForm.Email.
</div>
</p>
<p>
<Eingabe type = "Senden" ng-disabled = "MainForm. $ ungültig" />
</p>
</form>
Es ist nicht kompliziert, lass uns etwas hinzufügen.
Um die Eingabeaufforderungen freundlicher zu gestalten (?), Versuchen wir, die Auswirkungen von Eingabeaufforderungen zu erzielen, die nach dem Cursorblätter erscheinen.
Zu diesem Zeitpunkt wird es viel bequemer sein, Anweisungen zu verwenden. Hier beinhalten wir zunächst einige Informationen zu den Anweisungen.
Führen Sie es zuerst aus und sprechen Sie dann darüber:
Die Codekopie lautet wie folgt:
var myapp = angular.module ('myapp', [])
.Controller ('validationController', ['$ scope', function ($ scope) {
$ scope.user = 'kavlez';
$ scope.email = '[email protected]';
}])
.Directive ('Hintonblur', [function () {
zurückkehren {
erfordern: 'ngmodel',
Link: Funktion (Umfang, Element, Attrs, Strg) {
ctrl.focused = false;
Element.bind ('Focus', Funktion (evt) {
Scope. $ anwenden (function () {Strl.focused = true;});
}). Bind ('Blur', Funktion (evt) {
Scope. $ anwenden (function () {Strl.focused = false;});
});
}
}
}]);
Hier konzentrieren wir uns, um festzustellen, ob sich der Cursor auf einer bestimmten Eigenschaft befindet. Wenn das Fokus- oder Blur -Ereignis in einem Objekt unter Verwendung der Hintonblur -Richtlinie auftritt, änderte sich der Fokuszustand.
Das Formular wird wie folgt geändert:
Die Codekopie lautet wie folgt:
<Formular ng-controller = "validationController" name = "MainForm">
<P> E -Mail:
<Eingabe type = "E-Mail" name = "E-Mail" ng-model = "myemail" ng-minLength = "3" ng-maxLength = "50" Erforderliche Hinweise auf-blur />
<div style = "color: rot" ng-messages = "MainForm.Email.
</div>
</p>
<p>
<Eingabe type = "Senden" ng-disabled = "MainForm. $ ungültig" />
</p>
</form>
Fügen Sie das Urteil der Fokussierung in NG-Show hinzu, und eine Aufforderung wird angezeigt, wenn dies falsch ist.
Es sieht jetzt so aus.
Anpassen von Verifizierungsmethoden und Gültigkeit, die auch Richtlinien verwendet.
Stellen Sie sicher, dass die E -Mail, die Sie ausgefüllt haben, besetzt ist. Hier ist eine einfache Simulation:
Die Codekopie lautet wie folgt:
.Directive ('iSalreadytaken', function () {
zurückkehren {
erfordern: 'ngmodel',
Link: Funktion (Scope, Ele, Attrs, Strg) {
ctrl. $ parsers.push (Funktion (val) {
Strg.
var E -MailTable = [
für (var i = 0; i <E -MailTable.length; i+= 1)
if (val == E -Mail -Table [i])
zurückkehren;
Strg.
Rückkehr val;
})
}
}
})
Fügen Sie das IS-Already-Taken-Attribut zum Eingabeelement hinzu und fügen Sie eine weitere NG-Message hinzu:
Die Codekopie lautet wie folgt:
<p ng-message = "E-MailAvailable"> Nimmt bereits! Probieren Sie andere E -Mail -Adressen aus! </p>