Eingehende Untersuchung der jQuery-Validierungsform validation_jquery

Im vorherigen Artikel wurden die Grundkenntnisse der jQuery Validate-Formularvalidierung vorgestellt. Weitere Informationen finden Sie unter „Erste Schritte mit der JQuery Validate-Formularvalidierung“ , Der heutige Artikel bietet eine ausführliche Untersuchung der jQuery Validate-Formularvalidierung. Im Folgenden finden Sie den gesamten Inhalt des Artikels:

1. Verwenden Sie andere Methoden, um das standardmäßige SUBMIT zu ersetzen

$().ready(function() {
 $("#signupForm").validate({
    submitHandler:function(form){
      alert("submitted");  
      form.submit();
    }  
  });
});

Ajax-Methode verwenden

 $(".selector").validate({   
 submitHandler: function(form) 
  {   
   $(form).ajaxSubmit();   
  } 
 }) 

Sie können den Standardwert von „validate“ festlegen, der wie folgt geschrieben wird:

 $.validator.setDefaults({
 submitHandler: function(form) { alert("submitted!");form.submit(); }
});

Wenn Sie ein Formular senden möchten, müssen Sie form.submit() anstelle von $(form).submit() verwenden.
2. Debuggen, das Formular nur überprüfen, aber nicht absenden
Wenn dieser Parameter wahr ist, wird das Formular nicht gesendet und nur überprüft, was für das Debuggen sehr praktisch ist.

$().ready(function() {
 $("#signupForm").validate({
    debug:true
  });
});

Wenn es mehrere Formulare auf einer Seite gibt und Sie diese auf Debug setzen möchten, verwenden Sie:

$.validator.setDefaults({
  debug: true
})

3. Ignorieren: Bestimmte Elemente ignorieren und nicht überprüfen
ignorieren: „.ignore“
4. Ändern Sie die Position, an der die Fehlermeldung angezeigt wird
errorPlacement: Rückruf
Gibt den Ort an, an dem der Fehler platziert wird. Der Standardwert ist: error.appendTo(element.parent()); das heißt, die Fehlermeldung wird nach dem überprüften Element platziert.

errorPlacement: function(error, element) { 
  error.appendTo(element.parent()); 
}

Beispiel

<tr>
  <td class="label"><label id="lfirstname" for="firstname">First Name</label></td>
  <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
  <td class="status"></td>
</tr>
<tr>
  <td style="padding-right: 5px;">
    <input id="dateformat_eu" name="dateformat" type="radio" value="0" />
    <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
  </td>
  <td style="padding-left: 5px;">
    <input id="dateformat_am" name="dateformat" type="radio" value="1" />
    <label id="ldateformat_am" for="dateformat_am">02/14/07</label>
  </td>
  <td></td>
</tr>
<tr>
  <td class="label"> </td>
  <td class="field" colspan="2">
    <div id="termswrap">
      <input id="terms" type="checkbox" name="terms" />
      <label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
    </div>
  </td>
</tr>

errorPlacement: function(error, element) {
  if ( element.is(":radio") )
    error.appendTo( element.parent().next().next() );
  else if ( element.is(":checkbox") )
    error.appendTo ( element.next() );
  else
    error.appendTo( element.parent().next() );
}

Die Funktion des Codes ist: Im Allgemeinen wird die Fehlermeldung in angezeigt, wenn es sich um Radio handelt, Es wird angezeigt. Wenn es sich in um ein Kontrollkästchen handelt, wird es hinter dem Inhalt angezeigt.
Parametertyp Beschreibung Standardwert
errorClass String gibt den CSS-Klassennamen der Fehleraufforderung an, und Sie können den Stil der Fehleraufforderung anpassen. „Fehler“
errorElement String Welches Label wird zum Markieren von Fehlern verwendet? Der Standardwert ist label, das in em geändert werden kann. „Label“
errorContainer Selector zeigt Überprüfungsinformationen an oder verbirgt sie. Er kann die Containereigenschaften automatisch so ändern, dass sie angezeigt werden, wenn eine Fehlermeldung angezeigt wird, und sie ausblenden, wenn kein Fehler vorliegt.
errorContainer: „#messageBox1, #messageBox2“
errorLabelContainer Selector legt Fehlerinformationen in einem Container ab.
Wrapper String Welche Bezeichnung sollte zum Umschließen des oben genannten errorELEment verwendet werden.
Im Allgemeinen werden diese drei Attribute gleichzeitig verwendet, um die Funktion zu realisieren, alle Fehlermeldungen in einem Container anzuzeigen und sie automatisch auszublenden, wenn keine Informationen vorhanden sind.
errorContainer: „div.error“,
errorLabelContainer: $("#signupForm div.error"),
Wrapper: „li“
5. Ändern Sie den Stil der Fehlermeldungsanzeige
Legen Sie den Stil der Fehleraufforderungen fest und fügen Sie die Symbolanzeige hinzu. Eine validation.css wurde in diesem System speziell für die Pflege des Stils der Validierungsdateien erstellt.

input.error { border: 1px solid red; }
label.error {
 background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;

 padding-left: 16px;

 padding-bottom: 2px;

 font-weight: bold;

 color: #EA5200;
}
label.checked {
 background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}

6. Jedes Feld wird durch die Ausführungsfunktion überprüft
Erfolg:String,Rückruf
Die Aktion, nachdem das zu überprüfende Element die Überprüfung bestanden hat, wird von einer Zeichenfolge gefolgt, die als CSS-Klasse behandelt wird, oder es kann eine Funktion folgen.

success: function(label) {
  // set   as text for IE
  label.html(" ").addClass("checked");
  //label.addClass("valid").text("Ok!")
}

Fügen Sie „valid“ zum Validierungselement mit dem in CSS definierten Stil hinzu.
Erfolg: „gültig“
7. Änderung der Verifizierungsauslösemethode
Obwohl das Folgende vom booleschen Typ ist, wird empfohlen, es nicht zufällig hinzuzufügen, es sei denn, Sie möchten es in „false“ ändern.
Standardwert für die Beschreibung des Triggermethodentyps
onsubmit Boolescher Wert Bei der Übermittlung validiert. Auf „false“ setzen, um andere Methoden zur Überprüfung zu verwenden. wahr
onfocusout Boolean Validiert, wenn der Fokus verloren geht (ausgenommen Kontrollkästchen/Optionsfelder). wahr
onkeyup Boolescher Wert Wird während der Eingabe überprüft. wahr
onclick Boolescher Wert Validiert, wenn auf Kontrollkästchen und Optionsfelder geklickt wird. wahr
focusInvalid Boolean Nachdem das Formular gesendet wurde, erhält das Formular, dessen Validierung fehlschlägt (das erste oder fehlgeschlagene Validierungsformular, das vor der Übermittlung den Fokus erhielt), den Fokus. wahr
focusCleanup Boolean Wenn true, wird die Fehlermeldung entfernt, wenn ein Element, das die Validierung nicht besteht, den Fokus erhält. Vermeiden Sie die Verwendung mit focusInvalid. falsch

// 重置表单
$().ready(function() {
 var validator = $("#signupForm").validate({
    submitHandler:function(form){
      alert("submitted");  
      form.submit();
    }  
  });
  $("#reset").click(function() {
    validator.resetForm();
  });

});

8. Asynchrone Überprüfung
remote: URL
Verwenden Sie Ajax zur Überprüfung. Standardmäßig wird der aktuell überprüfte Wert an die Remote-Adresse gesendet. Wenn Sie andere Werte senden müssen, können Sie die Datenoption verwenden.

remote: "check-email.php"
remote: {
  url: "check-email.php",   //后台处理程序
  type: "post",        //数据发送方式
  dataType: "json",      //接受数据格式  
  data: {           //要传递的数据
    username: function() {
      return $("#username").val();
    }
  }
}

远程地址只能输出 "true" 或 "false"，不能有其他输出。
9、添加自定义校验
addMethod：name, method, message
自定义验证方法

// 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
  var length = value.length;
  for(var i = 0; i < value.length; i++){
    if(value.charCodeAt(i) > 127){
      length++;
    }
  }
 return this.optional(element) || ( length >= param[0] && length <= param[1] );  
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));

// 邮政编码验证  
jQuery.validator.addMethod("isZipCode", function(value, element) {  
  var tel = /^[0-9]{6}$/;
  return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");

注意：要在 additional-methods.js 文件中添加或者在 jquery.validate.js 文件中添加。建议一般写在 additional-methods.js 文件中。
注意：在 messages_cn.js 文件中添加：isZipCode: "只能包括中文字、英文字母、数字和下划线"。调用前要添加对 additional-methods.js 文件的引用。
10、radio 和 checkbox、select 的验证
radio 的 required 表示必须选中一个。

<input type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
<input type="radio" id="gender_female" value="f" name="gender"/>
checkbox 的 required 表示必须选中。
<input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />
checkbox 的 minlength 表示必须选中的最小个数，maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。
<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />
select 的 required 表示选中的 value 不能为空。
<select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
  <option value=""></option>
  <option value="1">Buga</option>
  <option value="2">Baga</option>
  <option value="3">Oi</option>
</select>
select 的 minlength 表示选中的最小个数（可多选的 select），maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。
<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
  <option value="b">Banana</option>
  <option value="a">Apple</option>
  <option value="p">Peach</option>
  <option value="t">Turtle</option>
</select>

附表：内置验证方式：

以上就是针对jQuery Validate表单验证的深入学习，希望对大家的学习有所帮助。