Lernen Sie schnell, wie Sie das jQuery-Plugin verwenden

Der häufigste Anlass für die Verwendung von JavaScript ist die Formularvalidierung, und jQuery bietet als hervorragende JavaScript-Bibliothek auch ein hervorragendes Formularvalidierungs-Plug-in ----Validierung. Validation ist eines der ältesten jQuery-Plug-ins, wurde von verschiedenen Projekten auf der ganzen Welt verifiziert und von vielen Webentwicklern gelobt. Als Standardbibliothek für Verifizierungsmethoden weist Validation die folgenden Merkmale auf:

• 1. Integrierte Verifizierungsregeln: Es gibt 19 Arten integrierter Verifizierungsregeln wie erforderlich, Nummern, E-Mails, URLs und Kreditkartennummern
• 2. Benutzerdefinierte Verifizierungsregeln: Verifizierungsregeln können einfach angepasst werden
• 3. Einfache und leistungsstarke Eingabeaufforderung für Bestätigungsinformationen: Die Eingabeaufforderung für Bestätigungsinformationen wird standardmäßig bereitgestellt und bietet die Funktion zum Anpassen der Standardeingabeaufforderungsinformationen
• 4. Echtzeitüberprüfung: Die Überprüfung kann durch Keyup- oder Blur-Ereignisse ausgelöst werden, nicht nur, wenn das Formular gesendet wird

Verwendung:
1. Einführung der jQuery-Bibliothek und des Validierungs-Plug-ins

<script src="scripts/jquery-1.6.4.js" type="text/javascript"></script> 
<script src="scripts/jquery.validate.js" type="text/javascript"></script> 

2. Bestimmen Sie, welches Formular überprüft werden muss

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

3. Kodieren Sie Verifizierungsregeln für verschiedene Felder und legen Sie die entsprechenden Attribute der Felder fest

class="required"  必须填写 
class="required email"    必须填写且内容符合Email格式验证 
class="url"       符合URL格式验证 
minlength="2"   最小长度为2 

Es gibt 19 Arten überprüfbarer Regeln:
erforderlich: Pflichtfeld
remote:     „Bitte korrigieren Sie dieses Feld“,
E-Mail:                                                                                                URL: URL-Verifizierung
Datum: Datumsüberprüfung dateISO: Datumsüberprüfung (ISO)
dateDE:
Nummer: Nummernüberprüfung
NummerDE:
Ziffern:                                                                                                                                          
Kreditkarte:
Verifizierung der Kreditkartennummer
equalTo: „Bitte geben Sie den gleichen Wert noch einmal ein“-Bestätigung
Akzeptieren:  Zeichenfolgenüberprüfung mit zulässigem Suffixnamen
maxlength/minlength: Überprüfung der maximalen/minimalen Länge
Bereichslänge: Überprüfung des Zeichenfolgenlängenbereichs
Bereich:                                                                                                          max/min:                                                                   Eine weitere Überprüfungsmethode (schreiben Sie alle verifizierungsbezogenen Informationen zur einfachen Verwaltung in Klassenattribute)
1). Einführung eines neuen jQuery-Plug-ins
---jquery.metadata.js (jQuery-Plug-in, das die Analyse fester Formate unterstützt)

Code kopieren Der Code lautet wie folgt:

64ee26532c8269273d680fb7229272e02cacc6d41bbb37262a98f745aa00fbf0 2). Ändern Sie die Verifizierungsmethode namens

3). Schreiben Sie alle Verifizierungsregeln in das Klassenattribut

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

Sie können das Namensattribut auch verwenden, um Felder und Verifizierungsregeln zuzuordnen (das Verifizierungsverhalten ist vollständig von der HTML-Struktur entkoppelt)

class="{validate:{required: true, minlength: 2, messages:{required:'请输入姓名', minlength:'请至少输入两个字符'}}}" 
class="{validate:{required: true, email: true, messages:{required:'请输入电子邮件', email:'请检查电子邮件的格式'}}}"    

Internationalisierung

Die Standardsprache der Verifizierungsinformationen des Validierungs-Plug-Ins ist Englisch. Wenn Sie sie auf Chinesisch ändern möchten, müssen Sie nur die von Validation bereitgestellten chinesischen Verifizierungsinformationen importieren

$("#commentForm").validate({ 
  rules: { 
   username: { 
     required: true, 
     minlength: 2 
   }, 
   email: { 
     required: true, 
     email: true 
   }, 
   url:"url", 
   comment: "required" 
  }, 
  messages: { 
   username: { 
     required: '请输入姓名', 
     minlength: '请至少输入两个字符' 
   }, 
   email: { 
     required: '请输入电子邮件', 
     email: '请检查电子邮件的格式' 
   }, 
   url: '请检查网址的格式', 
   comment: '请输入您的评论' 
  } 
}); 

Code kopieren Der Code lautet wie folgt:

1df9aa1e3b266c6ad7b8be90ac725d2f2cacc6d41bbb37262a98f745aa00fbf0

Passen Sie die Verifizierungsinformationen an und verschönern Sie sie

Benutzerdefinierte Validierungsregeln

Das Obige ist eine detaillierte Einführung in das Formularvalidierungs-Plug-in jquery.validate.js. Ich hoffe, es wird für das Lernen aller hilfreich sein.

errorElement: "em",        //可以用其他标签，记住把样式也对应修改 
success: function(label) {  //label指向上面那个错误提示信息标签em 
   label.text("")            //清空错误提示消息 
       .addClass("success");  //加上自定义的success类 
   } 
在CSS中添加样式与之关联 
em.error { 
   background:url("images/unchecked.gif") no-repeat 0px 0px; 
   padding-left: 16px; 
} 
em.success { 
   background:url("images/checked.gif") no-repeat 0px 0px; 
   padding-left: 16px; 
}