Ausführliche Erläuterung der Verwendung der jQuery-Validierung

jQuery-Validierungsframework:

Grundlegender HTML-Code:

 1 　　<script src="js/jquery-1.9.1.js"></script> 2     <script src="js/jquery.validate.min.js"></script> 3     <script> 4         $(function () { 5             $('#myForm').validate({ 6  7                 rules: { 8                     //    用户名 9                     username: {　　//指的是input中的name10                         required: true,11                         rangelength: [6, 11]12                     },13                     //   密码14                     password: {15                         required: true,16                         rangelength: [11, 12]17                     },18                 },19           20                 messages: {21                     //   用户名22                     username: {23                         required: '此项必填',24                         rangelength: '用户名长度为6-11位'25                     },26                     //   密码27                     password: {28                         required: '此项必填',29                         rangelength: '用户名长度为11-12位'30                     },            
31                 },32                 // 校验全部通过33                 submitHandler: function () {34                     alert("校验全部通过！")35                 },36                37             })38         })39   </script>40 41 42 html:43     <form action="" id="myForm">44     <!--用户名-->45     <p>46         <label for="user">username:</label>47         <input type="text" name="username" id="user"/>48     </p>49     <!--密码-->50     <p>51         <label for="pass">password:</label>52         <input type="text" name="password" id="pass"/>53     </p>54     <!--提交-->55     <p><input type="submit" value="提交"/></p>56 　　</form>

Lassen Sie mich anhand des obigen Codes über die Verwendung der jQuery-Validierung sprechen.

1.validate(options) ist der Beginn der Ausführung des Formulars. Es wird verwendet, um das von Ihnen ausgewählte Formular zu überprüfen. ist der Formular-ID-Name.

2.rules() ist die Verifizierungsregel, also die Optionen in der Validierung, also die benutzerdefinierte Schlüssel/Wert-Paar-Regel= ==Der Schlüssel ist das Namensattribut eines Formularelements und der Wert ist eine einfache Zeichenfolge oder ein Objekt, das aus Regel-/Parameterpaaren besteht.

3. Nachrichten () sind benutzerdefinierte Schlüssel/Wert-Paar-Nachrichten === Der Schlüssel ist Das Namensattribut eines Formularelements, dessen Wert die vom Formularelement anzuzeigende Nachricht ist.

　4. Der Benutzername und das Passwort in Rules() sind die Namenswerte in der Eingabe.

　

　5. Es ist obligatorisch, dieses Element zu überprüfen, wenn der erforderliche Wert wahr ist.

　

　　6.minlength(length) legt die Mindestlänge des Validierungselements fest.

　

　 7.maxlength(length) legt die maximale Länge des Validierungselements fest.

　 8.rangelength(range) legt einen Längenbereich des Validierungselements fest.

　9.max(value) legt den Maximalwert des Validierungselements fest.

　10.min(value) legt den Mindestwert des Validierungselements fest.

　

　11.range() legt den Bereich des Zeigers fest.

12.email() überprüft, ob das E-Mail-Format korrekt ist.

　13.url() Überprüfen Sie, ob das URL-Format korrekt ist.

14.date() überprüft, ob das Datumsformat korrekt ist. [Hinweis: überprüft nicht die Genauigkeit des Datums, sondern nur das Format ]

15.submitHandler Wann Das Formular wurde bestanden. Überprüfen Sie das Formular und senden Sie es ab.

// 校验全部通过                submitHandler: function () {
                    alert("校验全部通过！")
                },

　　16.invalidHandler, wenn ein Formular gesendet wird, dessen Validierung fehlschlägt In dieser Rückruffunktion können Sie einige Dinge erledigen.

 //  校验不通过　　　　　　　　　　　　　　invalidHandler: function () {
                    alert("no")
                },

　17.Der Standardwert von focusInvalid ist wahr. Wenn die Überprüfung fehlschlägt, wird der Fokus gesetzt Springt zum ersten ungültigen Formularelement.

　18.focusCleanupDer Standardwert ist wahr, Wenn das Formular den Fokus erhält , Entfernt die errorClass im Formular und verbirgt alle Fehlermeldungen. [Hinweis: Vermeiden Sie die Verwendung mit focusInvalid. ]

　19. errorElement Verwenden Sie den HTML-Elementtyp, um einen Container für Fehlermeldungen zu erstellen. Standardmäßig wird in der Beschriftung

　

　20 geschrieben.errorClassStil zum Definieren von Fehlern festlegen Stil der Nachricht.

　21.Hervorheben hebt die Formularelemente hervor, die die Validierung nicht bestanden haben.

highlight: function (element, errorClass) {
                  $(element).addClass(errorClass);
                   $(element).fadeOut.fadeIn();
                }

Mit den oben genannten Dingen bin ich in Kontakt gekommen, und es gibt noch viel mehr über das jQuery-Validierungsframework. Interessierte können sich die API von jQuery.validate.js ansehen.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung der jQuery-Validierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!