Étude approfondie du formulaire jQuery Validate validation_jquery

L'article précédent a présenté les connaissances de base de la validation du formulaire jQuery Validate. Pour plus de détails, veuillez vous référer à "JQuery Validate Form Validation Getting Started Learning" , . Cet article d'aujourd'hui fournit une étude approfondie de la validation du formulaire jQuery Validate. Voici l'intégralité du contenu de l'article :

1. Utilisez d'autres méthodes pour remplacer le SUBMIT par défaut

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

Utiliser la méthode ajax

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

Vous pouvez définir la valeur par défaut de validate, qui s'écrit comme suit :

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

Si vous souhaitez soumettre un formulaire, vous devez utiliser form.submit() au lieu de $(form).submit().
2. Déboguer, vérifier uniquement mais pas soumettre le formulaire
Si ce paramètre est vrai, le formulaire ne sera pas soumis et sera uniquement vérifié, ce qui est très pratique pour le débogage.

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

S'il y a plusieurs formulaires sur une page et que vous souhaitez les configurer pour qu'ils soient débogués, utilisez :

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

3. ignorer : ignorer certains éléments et ne pas vérifier
ignorer : ".ignorer"
4. Changez la position où le message d'erreur est affiché
errorPlacement : rappel
Indique l'emplacement où l'erreur est placée. La valeur par défaut est : error.appendTo(element.parent()); c'est-à-dire que le message d'erreur est placé après l'élément vérifié.

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

Exemple

<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() );
}

La fonction du code est : généralement, le message d'erreur s'affiche dans, s'il s'agit d'une radio, elle est affichée Dans , s'il s'agit d'une case à cocher, elle est affichée derrière le contenu.
Type de paramètre Description Valeur par défaut
errorClass String spécifie le nom de classe CSS de l'invite d'erreur et vous pouvez personnaliser le style de l'invite d'erreur. "erreur"
errorElement String Quelle étiquette est utilisée pour marquer les erreurs ? La valeur par défaut est label, qui peut être remplacée par em. "étiquette"
errorContainer Selector affiche ou masque les informations de vérification. Il peut modifier automatiquement les propriétés du conteneur à afficher lorsqu'un message d'erreur apparaît et les masquer lorsqu'il n'y a pas d'erreur. Il est peu utile.
errorContainer : "#messageBox1, #messageBox2"
errorLabelContainer Selector place les informations d’erreur dans un conteneur.
wrapper String Quelle étiquette doit être utilisée pour envelopper l'errorELement ci-dessus.
Généralement, ces trois attributs sont utilisés en même temps pour réaliser la fonction d'affichage de toutes les invites d'erreur dans un conteneur et de les masquer automatiquement lorsqu'il n'y a aucune information.
errorContainer : "div.error",
errorLabelContainer : $("#signupForm div.error"),
enveloppe : "li"
5. Changer le style d'affichage des messages d'erreur
Définissez le style des invites d'erreur et ajoutez l'affichage des icônes. Un fichier validation.css a été créé dans ce système spécifiquement pour conserver le style des fichiers de validation.

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. Chaque champ est vérifié via la fonction d'exécution
succès：String,Callback
L'action après l'élément à vérifier réussit la vérification si elle est suivie d'une chaîne, elle sera traitée comme une classe CSS, ou elle peut être suivie d'une fonction.

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

Ajoutez "valid" à l'élément de validation avec le style défini dans CSS .
réussite : "valide"
7. Modification de la méthode de déclenchement de la vérification
Bien que ce qui suit soit de type booléen, il est recommandé de ne pas l'ajouter au hasard, sauf si vous souhaitez le changer en false.
Valeur par défaut de la description du type de méthode de déclenchement
onsubmit Booléen Validé lors de la soumission. Définissez sur false pour utiliser d’autres méthodes de vérification. vrai
onfocusout Booléen Valide lorsque le focus est perdu (à l'exclusion des cases à cocher/boutons radio). vrai
onkeyup Booléen Validé lors du keyup. vrai
onclick Booléen Valide lorsque les cases à cocher et les boutons radio sont cliqués. vrai
focusInvalid Boolean Une fois le formulaire soumis, le formulaire dont la validation échoue (le premier ou le formulaire de validation ayant échoué qui a reçu le focus avant la soumission) obtiendra le focus. vrai
focusCleanup Boolean Si vrai, supprime le message d'erreur lorsqu'un élément qui échoue à la validation obtient le focus. Évitez de l'utiliser avec focusInvalid. faux

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

});

8. Vérification asynchrone
à distance : URL
Utilisez ajax pour la vérification. Par défaut, la valeur actuellement vérifiée sera soumise à l'adresse distante. Si vous devez soumettre d'autres valeurs, vous pouvez utiliser l'option de données.

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表单验证的深入学习，希望对大家的学习有所帮助。