Erste Schritte mit der grundlegenden Verwendung von jQuery-Validierungsformular validation_jquery

1. Einführung in das jQuery Validate-Plug-in

Das jQuery Validate-Plug-in bietet leistungsstarke Validierungsfunktionen für Formulare, die die clientseitige Formularvalidierung erleichtern und gleichzeitig eine Vielzahl von Anpassungsoptionen bieten, um verschiedene Anwendungsanforderungen zu erfüllen. Das Plugin bündelt eine Reihe nützlicher Validierungsmethoden, einschließlich URL- und E-Mail-Validierung, und stellt eine API zum Schreiben benutzerdefinierter Methoden bereit. Alle gebündelten Methoden verwenden standardmäßig Englisch für Fehlermeldungen und wurden in 37 weitere Sprachen übersetzt.

Dieses Plugin wurde von Jörn Zaefferer geschrieben und gepflegt, einem Mitglied des jQuery-Teams, einem leitenden Entwickler im jQuery-UI-Team und dem Betreuer von QUnit.

• Offizielle Website: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
• Online-Dokumentation: http://docs.jquery.com/Plugins/Validation
• Online-API: http://jquery.bassistance.de/api-browser/plugins.html

2. Einführung in die Funktionen von jQuery Validate

jQuery Validate verfügt über die folgenden Funktionen:

(1) Integrierte Verifizierungsregeln;

Das leistungsstarke jQuery-Formularvalidierungs-Plug-in eignet sich für die tägliche Überprüfung von E-Mails, Telefonnummern, URLs usw. sowie die Ajax-Überprüfung. Zusätzlich zu seinen eigenen umfangreichen Validierungsregeln können Sie auch benutzerdefinierte Validierungsregeln hinzufügen.

Kompatibel mit IE 6, Chrome, Firefox, Safari, Opera 10

(2) Benutzerdefinierte Verifizierungsregeln;

(3) Einfache, leistungsstarke Informationsaufforderung.

(4) Echtzeitüberprüfung: Die Überprüfung wird durch Keyup- oder Blur-Ereignisse ausgelöst, nicht nur bei der Übermittlung.
3. Einfache Beispiele zum Erlernen von jQuery Validate

Die Prämisse dieser Beispiele besteht darin, die jQuery-Bibliothek und das Validierungs-Plug-in vorzustellen.

 <script type="text/javascript" src="../../lib/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="../../dist/jquery.validate.js"></script>

1. Verwenden Sie Plug-ins, um einige einfache Überprüfungen durchzuführen

 
 
 <script type="text/javascript" src="../../lib/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="../../dist/jquery.validate.js"></script>
 
 
 <script>
 $(document).ready(function(){
  $("#commentForm").validate();
 });
 </script>


 
 

 

 
表单验证
 
Name
 
E-Mail
 
URL
 
text
 

 
 
 

Der Effekt ist wie folgt:

Erläuterung der obigen Überprüfung:
1) Zuerst müssen Sie jquery-1.11.1.js einführen, da dieses Plug-in auf JQuery basiert.
2) Stellen Sie das Validierungs-Plug-in jquery.validate.js vor.
3) Führen Sie ein Prompt-Lokalisierungsskript ein. Für die Internationalisierung der Verifizierungsinformationen erfolgt die Standardverifizierungsaufforderung auf Englisch. Die Internationalisierung kann durch Importieren der durch die Validierung erstellten Internationalisierungsdatei erreicht werden. Ändern Sie den Anzeigestil für Fehler-/Korrekturmeldungen.
4) Fügen Sie den zu überprüfenden Typ im Klassenattribut des Eingabefelds hinzu. Codieren Sie für verschiedene Felder die Verifizierungsregeln und legen Sie die entsprechenden Attribute der Felder fest

Einige der überprüfbaren Regeltypen:  

(1)required:true 必输字段 
(2)remote:"check.shtml" 使用ajax方法调用check.shtml验证输入值 
(3)email:true 必须输入正确格式的电子邮件(只能验证格式,不保证有效性) 
(4)url:true 必须输入正确格式的网址 
(5)date:true 必须输入正确格式的日期 
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性 
(7)number:true 必须输入合法的数字(负数，小数) 
(8)digits:true 必须输入整数 
(9)creditcard: 必须输入合法的信用卡号 
(10)equalTo:"#field" 输入值必须和#field相同 
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀） 
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符) 
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符) 
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) 
(15)range:[5,10] 输入值必须介于 5 和 10 之间 
(16)max:5 输入值不能大于5 
(17)min:10 输入值不能小于10

5), bestimmen Sie, welches Formular überprüft werden muss

<script type="text/javascript">
////<![CDATA[
$(document).ready(function(){
 $("#commentForm").validate();
});
//]]>
</script>

Das Obige ist eine Einführung in die Validierung von JQuery-Formularen. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.