Anweisungen zur Überprüfung der Gemeinschaftsform
1.. Erforderliche Überprüfung
Unabhängig davon, ob ein Formulareingang ausgefüllt wurde, fügen Sie einfach das HTML5 -Tag zum Eingabefeldelement hinzu:
Kopieren Sie den Code wie folgt: <Eingabe type = "text" erforderlich />
2. Mindestlänge
Stellen Sie sicher, dass die Textlänge des Formulareingangs größer als ein bestimmter Mindestwert ist, und verwenden Sie den Befehl ng-minleng = "{Nummer}" im Eingabefeld:
Kopieren Sie den Code wie folgt: <Eingabe type = "text" ng-minLength = "5" />
3. Maximale Länge
Stellen Sie sicher, dass die Textlänge des Formulareingangs kleiner oder gleich einem bestimmten Maximalwert ist, und verwenden Sie die Anweisung ng-maxLength = "{Nummer}" im Eingabefeld:
Kopieren Sie den Code wie folgt: <Eingabe type = "text" ng-maxLength = "20" />
4. Musteranpassung
Verwenden Sie ng-pattern = "/muster/", um sicherzustellen, dass der Eingang mit dem angegebenen regulären Ausdruck übereinstimmt:
Kopieren Sie den Code-Code wie folgt: <Eingabe type = "text" ng-pattern = "/[a-za-z]/"/>
5. E -Mail
Stellen Sie sicher, dass der Eingabinhalt eine E -Mail ist. Setzen Sie einfach den Eingabetyp auf E -Mail wie unten:
Kopieren Sie den Code wie folgt: <Eingabe type = "E-Mail" name = "E-Mail" ng-model = "user.email" />
6. Zahlen
Stellen Sie sicher, dass der Eingangsinhalt eine Nummer ist, und setzen Sie den Eingangstyp auf die Nummer fest:
Kopieren Sie den Code wie folgt: <Eingabe type = "number" name = "ay" ng-model = "user.age" />
7. URL
Stellen Sie sicher, dass der Eingangsinhalt eine URL ist, und setzen Sie den Eingangstyp auf URL:
Kopieren Sie den Code wie folgt: <Eingabe type = "url" name = "homepage" ng-model = "user.facebook_url" />
Lassen Sie uns diese Formprüfungen in bestimmten Implementierungen testen:
<div> <Formrolle = "Form"> <div> <div> <Label für = "Name"> 1. Ersatz </label> </div> <div> <input id = "name" type = "text" erforderlich ng-model = 'user Minimum length=5</label> </div> <div> <input type="text" id="minlength" ng-minlength="5" ng-model="user.minlength" /> </div> </div> <div> <label for="minlength">3.Maximum length=20</label> </div> <div> <input type="text" ng-model="user.maxlength" ng-maxLength = "20"/> </div> </div> <div> <div> <label für = "minLength"> 4. Muster-Matching </label> </div> <div> <Eingabe type = "text" id = "minLength" ng-model = "user E -Mail </label> </div> </div> <div> <Label für = "E -Mail"> 5. E-Mail </label> </div> <div> <Eingabe type = "E-Mail" id = "E-Mail" name = "E-Mail" ng-model = "user.email"/> </div> </div> <div> <div> <label für = "ay"> 6. Nummer </label> </div> <div> <Eingabe type = "number" id = "älter" name = "älter" ng-model = "user.age"/> </div> </div> <div> <div> <label für = "url"> 7. url </label> </div> <Eingabe type = "url" id </div> </div> <div> <Eingabe type = "sure" value = "subieren"/> </div> </form> </div> <div> 1. Erforderliche Felder: {{user.name}} <br> 2. min. length=5:{{user.minlength}}<br> 3. Maximum length=20:{{user.maxlength}}<br> 4. Pattern matching: {{user.pattern}}<br> 5. Email: {{user.email}}<br> 6. Number: {{user.age}}<br> 7.Url: {{user.url}} <br> </div>Im Test stellten wir fest, dass die Zwei-Wege-Bindung nur dann in Echtzeit durchgeführt wird, wenn der Ausdruck die Überprüfung erfüllt. Gleichzeitig stellten wir auch fest, dass die Renderings wie folgt sind:
Nichts scheint passiert zu sein, aber wenn wir es mit einem Team von HTML5 -Überprüfungen in einen Browser portieren, das nicht sehr gut ist, testen wir es [IE9 in diesem Beispiel], das Problem ist, dass einige Felder überhaupt nicht verifiziert werden.
Tatsächlich haben wir im obigen Beispiel die HTML5 -Überprüfung und die eigene Verifizierung von NG verwendet, um sie zu kombinieren. Es unterstützt keine HTML5 -Überprüfung, aber die freie Überprüfung von NG läuft gut. Die Lösung ist sehr einfach. Sie können Musteranpassungen verwenden, um diese Situationen zu lösen, oder Sie können Überprüfungsanweisungen anpassen, um die Verifizierungsregeln neu zu schreiben oder neu zu definieren.
Blockieren Sie das Standardverifizierungsverhalten des Browsers für Formulare
Fügen Sie einfach das Novalidate -Tag im Formular Element hinzu. Die Frage ist, woher wir wissen, welche Felder in unserem Formular gültig sind und welche Dinge illegal oder ungültig sind. NG bietet auch eine großartige Lösung dafür. Die Eigenschaften des Formulars können in dem $ Scope -Objekt zugegriffen werden, zu dem es gehört, und wir können auf das $ Scope -Objekt zugreifen, sodass JavaScript indirekt auf die Formeigenschaften in der DOM zugreifen kann. Mit diesen Eigenschaften können wir in Echtzeit auf das Formular reagieren.
Auf diese Eigenschaften kann mit dem Format formatname.inputfieldname.property zugegriffen werden.
Nicht modifizierte Form
Die Boolesche Eigenschaft gibt an, ob der Benutzer das Formular geändert hat. Wenn es ture ist, bedeutet dies, dass es nicht geändert wurde; Falsch bedeutet, dass es geändert wurde:
Die Codekopie lautet wie folgt: Formname.inputfieldName. $ Pristine; Modifiziertes Formular
Boolesche Eigenschaft, wenn und nur wenn der Benutzer das Formular tatsächlich geändert hat. Unabhängig davon, ob die Form verifiziert ist oder nicht:
Die Codekopie lautet wie folgt: Formname.inputfieldName.
Verifizierte Form
Boolesche Eigenschaft, die angibt, ob das Formular die Überprüfung bestanden hat. Wenn das Formular derzeit validiert ist, wird es wahr sein:
Der Kopiercode lautet wie folgt: Formname.inputfieldName.
Die letzten beiden Eigenschaften sind besonders nützlich, um das DOM -Element anzuzeigen oder zu verbergen. Gleichzeitig sind sie auch sehr nützlich, wenn Sie eine bestimmte Klasse einrichten möchten.
Fehler
Dies ist eine weitere sehr nützliche Eigenschaft, die von AngularJS bereitgestellt wird: das $ error -Objekt. Es enthält alle Überprüfungsinhalte des aktuellen Formulars sowie Informationen darüber, ob sie legitim sind. Greifen Sie mit der folgenden Syntax auf diese Eigenschaft zu
Die Codekopie lautet wie folgt: Formname.inputfieldName. $ Fehler
Wenn die Überprüfung fehlschlägt, ist der Wert dieser Eigenschaft wahr; Wenn der Wert falsch ist, bedeutet dies, dass der Wert des Eingangsfeldes die Überprüfung bestanden hat.
Im Folgenden testen wir diese Überprüfungsanweisungen:
<! DocType html> <html ng-App = "myTest"> <head> <meta name = "viewPort" content = "width = Geräte-Width"/> <title> Index </title> <link href = "~/content/css/bootstrap.min src = "~/javaScript/angular.min.js"> </script> <style type = "text/csS"> body {padding-top: 30px; } </style> </head> <body ng-controller = "mycontroller"> <div> <Formrolle = "Form" name = "myForm" ng-submit = "submitform (myForm. ng-model = 'user.name'/> <span ng-show = "myForm.name. Minimale Länge = 5 </label> </div> <div> <Eingabe type = "text" id = "minLength" name = "minLength" ng-minLength = "5" ng-model = "user.minLength"/> <span ng-show = "myForm.MinLength. for = "maxLength"> 3.Maximum Länge = 20 </label> </div> <div> <Eingabe type = "text" id = "maxLength" name = "maxLength" ng-model = "user </div> <div> <div> <label für = "muster"> 4. Muster-Matching </label> </div> <div> <Eingabe type = "text" id = "muster" name = "muster" ng-model = "user.pattern" ng-pattern = "/^[a-za-z]*/d $/"/> <span ng-show = "myForm.patter. für = "E -Mail"> 5. E-Mail </label> </div> <div> <Eingabe type = "E-Mail" id = "E-Mail" name = "E-Mail" ng-model = "user.email"/> <span ng-show = "myForm.email. $ Schmutzig && myForm.email. Nummer </label> </div> <div> <Eingabe type = "number" id = "älter" name = "älter" ng-model = "user.age"/> <span ng-show = "myForm.age. id = "url" name = "url" ng-model = "user.url"/> <span ng-show = "myform.url. {{user.name}} $ Pristine [nicht geändert]: {{myForm.name. {{myForm.name. $ error.Required}} <br> 2. Minimum Länge = 5: {{user.MinLength}} $ Pristine [nicht geändert]: {{myForm.MinLength. oder {{myForm.maxLength. $ pristine}} $ schmutzig 【modifiziert】: {{myForm.maxLength. {{myForm.maxLength. $ error}} <br> 4. Muster -Matching: {{user.pattern}} $ Pristine 【nicht geändert】: {{myForm.pattern. oder }} $ schmutzig 【modifiziert】: {{{myForm.Email. $ schmutzig}} $ ungültig 【Verifizierung fehlgeschlagen】: {{{myForm.Email. $ ungültig} $ ungültig 【Überprüfung erfolgreich】: {{{MyForm.Email. {{user.age}} $ Pristine 【nicht geändert】: {{myForm.age. $ Pristine}} $ schmutzig 【geändert】: {{myForm.age. $ ERRAGE 【ERROLDETALIEN】: {{myForm.age. oder .Controller ('MyController', Funktion ($ scope) {$ scope.submitform = function (isvalid) {if (! isvalid) {alert ('Verifizierung fehlgeschlagen');}};}); </script>Die Effekte sind wie folgt:
Gleichzeitig hat NG einige CSS -Stile für diese Überprüfungsanweisungen auf gezielte Weise festgelegt.
Dazu gehören:
Die Codekopie lautet wie folgt: .ng-Valid {} .ng-invalid {} .ng-pristine {} .ng-dirty {}/ * Wirklich spezifische CSS-Regeln, die durch Angular angewendet werden */. Ng-invalid-erquerte {} .ng-invalid-minlength {{{}. {{{{}. {{{}. {{{}. {{{{}. {{{}. {{}. {{}. {{}. {{}. {{}. {}.}.
Sie entsprechen dem spezifischen Zustand des Formulareingangsfeldes.
Wenn beispielsweise die Eingabe in einem Feld illegal ist, wird die .ng-invlid-Klasse zu diesem Feld hinzugefügt. Sie können Ihre Lieblings -CSS bearbeiten. Sie können diese Klassen privat anpassen, um bestimmte Szenarioanwendungen zu implementieren.
Die Anweisungen zur Standardüberprüfung können jedoch möglicherweise nicht in der Lage sein, unsere realen Anwendungsszenarien vollständig zu erfüllen, und die Funktionen der benutzerdefinierten Überprüfungsanweisungen werden auch von NG bereitgestellt.
Schauen wir uns zunächst ein einfaches Beispiel an:
Angular.module ("myTest", []) .directive ('multipleemail', [function () {return {fordere: "ngmodel", link: function (scope, tert, attr, ngmodel) {if (ngmodel) {var E -MailSregexp = /^( States §-Z0-9!#$%&'*+//=?^_` < Ngmodel.Der Code der Seite HTML lautet wie folgt:
<Formrolle = "Form" id = "custom_form" name = "custom_form" nomove> <div> <label> Multiple E-Mail < /label> <div> <Eingabe multiple-email name = "user_email" ng-model = "user </div> </div> <div> <Eingabe ng-disabled = "custom_form. $ Invalid" type = "surenden" value = "subieren"/> </div> </form>
Der Code ist sehr einfach und der Effekt lautet wie folgt:
Dieser Code ist sehr einfach, beinhaltet jedoch mehrere wichtige Eigenschaften von ngmodelController. $ ViewValue
Die $ ViewValue -Eigenschaft enthält die tatsächliche Zeichenfolge, die für die Aktualisierung der Ansicht erforderlich ist.
$ modelValue
$ modelValue wird vom Datenmodell gehalten. $ modelValue und $ ViewValue können unterschiedlich sein, je nachdem, ob die $ Parser -Pipeline darauf arbeitet.
$ Parser
Der Wert von $ Parsers ist ein Array, das aus Funktionen besteht. Wenn der Benutzer mit dem Controller und der $ setViewValue () -Methode im NgModelController aufgerufen wird, werden die Funktionen im NgModelController nacheinander als einzeln bezeichnet, wenn der Benutzer mit dem Controller mit dem Controller interagiert, und die $ setViewValue () -Methode in der Ngmodelcontroller wird in einem Ein -in -Form -Einsatz von einer Pipelin als Eins -in -Form von einer Pipelin als eine von einem in der Form von einer Form von einer Form von einem Formular als Form von einer Form von einer Form, die von einer Form von einer Form von einer Pipeline genannt wird. Der von Ngmodel aus dem DOM gelesene Wert wird in $ parsers in die Funktion übergeben und vom Parser nacheinander verarbeitet. Dies dient zur Verarbeitung und Änderung der Werte.
HINWEIS: Die Funktion ngmodel. $ SetViewValue () wird verwendet, um den Ansichtswert im Umfang festzulegen.
Die Funktion ngmodel. $ SetViewValue () kann einen Parameter akzeptieren.
Wert (Zeichenfolge): Der Wert -Parameter ist der tatsächliche Wert, den wir der NGModel -Instanz zuweisen möchten.
Diese Methode aktualisiert das lokale $ ViewValue auf dem Controller und übergibt den Wert an jede $ Parser -Funktion (einschließlich des Validators). Wenn der Wert analysiert und alle Funktionen in der $ Parser-Pipeline aufgerufen werden, wird der Wert der $ modelValue-Eigenschaft zugewiesen und an den Ausdruck übergeben, der von der NG-Model-Eigenschaft in der Anweisung bereitgestellt wird. Nach Abschluss aller Schritte werden alle Zuhörer in $ ViewChangelistens aufgerufen. Beachten Sie, dass das Aufrufen von $ setViewValue () allein keine neue Digest -Schleife hervorruft. Wenn Sie also die Anweisung aktualisieren möchten, müssen Sie die Digest manuell auslösen, nachdem Sie $ ViewValue festgelegt haben. Die $ setViewValue () -Methode eignet sich zum Anhören von benutzerdefinierten Ereignissen in benutzerdefinierten Direktiven (z. B. Verwendung eines JQuery -Plugins mit Callback -Funktionen). Wir möchten $ ViewValue festlegen und Digest -Loops ausführen, wenn der Rückruf aufgerufen wird.
$ formatters
Der Wert von $ formatters ist ein Array von Funktionen, die nacheinander in Form einer Pipeline bezeichnet werden, wenn sich der Wert des Datenmodells ändert. Es hat keinen Einfluss auf die $ Parser -Pipeline und wird verwendet, um Werte zu formatieren und zu konvertieren, um sie mit dieser Wertgrenze in den Steuerelementen anzuzeigen.
$ Viewchangelistener
Der Wert von $ ViewChangelisteners ist eine Reihe von Funktionen, die nacheinander in Form einer Pipeline bezeichnet werden, wenn sich der Wert in der Ansicht ändert. Mit $ ViewChangelisteners kann ein ähnliches Verhalten ohne Verwendung von $ Watch erreicht werden. Da der Rückgabewert ignoriert wird, müssen diese Funktionen keine Werte zurückgeben.
$ Fehler
Das $ error -Objekt enthält den Validator -Namen, der die Bestätigung und die entsprechenden Fehlerinformationen nicht übergeben hat.
$ Pristine
Der Wert von $ Pristine ist boolescher, der uns sagen kann, ob der Benutzer die Kontrolle geändert hat.
$ schmutzig
Der Wert von $ Dirty ist das Gegenteil von $ Pristine, was uns sagen kann, ob der Benutzer mit der Kontrolle interagiert hat.
$ gültig
Der valte Wert $ gibt an, ob die aktuelle Steuerung Fehler vorliegt. Der Wert ist falsch, wenn ein Fehler vorliegt, und der Wert ist wahr, wenn kein Fehler vorliegt.
$ ungültig
Der ungültige Wert von $ gibt an, ob mindestens einen Fehler in der aktuellen Steuerung vorhanden ist und sein Wert das Gegenteil von $ gültig ist.
Nachdem Sie die Grundkenntnispunkte gelernt haben, müssen Sie die Schreibmethode der benutzerdefinierten Überprüfung tief lernen. Nach NG1.3 wurde die einfache Verwendung von Überprüfungsanweisungen verbessert.
Das obige ist eine detaillierte Erklärung der Beispiele für die Verwendung von AngularJS -Verifizierungsformular, die Ihnen vom Editor vorgelegt wurde. Ich hoffe es kann dir helfen. Ich werde das relevante Wissen über das AngularJS -Verifizierungsformular in Zukunft weiter aktualisieren. Bitte achten Sie auf die Website wulin.com!