Exemple d'explication du plug-in de validation de formulaire Validation application_jquery

jquery.Validation est un excellent plug-in jquery qui peut valider les formulaires clients et fournit de nombreuses propriétés et méthodes personnalisables avec une bonne évolutivité. Maintenant combiné avec la situation réelle, j'ai organisé les vérifications qui sont souvent utilisées dans le projet dans un exemple DEMO. Cet article vise à comprendre l'application de la validation en expliquant cet exemple.

Les vérifications impliquées dans cet exemple sont :
Nom d'utilisateur : longueur, vérification des caractères, vérification de la répétabilité ajax (s'il existe déjà).
Mot de passe : vérification de la longueur, répétition de la vérification du mot de passe.
E-mail : vérification de l'adresse e-mail.
Téléphone fixe : vérification du numéro de téléphone fixe de Chine continentale.
Numéro de téléphone mobile : vérification du numéro de téléphone mobile en Chine continentale.
URL : vérification de l'adresse URL du site Web.
Date : Validation du format de date standard.
Nombre : entier, validation d'entier positif, validation de plage numérique.
Carte d'identité : vérification du numéro d'identification de la Chine continentale.
Code postal : vérification du code postal du continent.
Fichier : Vérification du type de fichier (suffixe), par exemple, seules les images peuvent être téléchargées.
IP : vérification de l'adresse IP.
Code de vérification : vérification du code de vérification ajax.
Utilisation :
1. Préparez les plug-ins jquery et jquery.validate

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

2. Préparer les styles CSS
Je n'entrerai pas dans les détails sur le style de la page. Vous pouvez écrire votre propre style ou vous référer au code source de la page DEMO. Le style clé à souligner ici est le style d'affichage des informations de vérification :

label.error{color:#ea5200; margin-left:4px; padding:0px 20px; 
background:url(images/unchecked.gif) no-repeat 2px 0 } 
label.right{margin-left:4px; padding-left:20px; background: 
url(images/checked.gif) no-repeat 2px 0} 

3.XHTML

<form id="myform" action="#" method="post"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mytable"> 
 <tr class="table_title"> 
  <td colspan="2">jquery.validation 表单验证</td> 
 </tr> 
 <tr> 
  <td width="22%" align="right">用户名：</td> 
  <td><input type="text" name="user" id="user" class="input required" /> 
  <p>用户名为3-16个字符，可以为数字、字母、下划线以及中文</p></td> 
 </tr> 
 <tr> 
  <td align="right">密码：</td> 
  <td><input type="password" name="pass" id="pass" class="input required" /> 
  <p>最小长度:6 最大长度:16</p> 
  </td> 
 </tr> 
 <tr> 
  <td align="right">确认密码：</td> 
  <td><input type="password" name="repass" class="input required" /></td> 
 </tr> 
</table> 
</form> 

Il convient de mentionner que j'ai donné à l'étiquette un style de classe "obligatoire", et sa fonction sera mentionnée ci-dessous.
4. Appliquer le plug-in de validation
Méthode pour appeler le plug-in de Validation :

$(function(){    
  var validate = $("#myform").validate({ 
     rules:{ //定义验证规则 
      ...... 
     }, 
     messages:{ //定义提示信息 
      ...... 
     } 
  }) 
}); 

règles : Définissez des règles de vérification, sous la forme clé:valeur, clé est l'élément à vérifier, et valeur peut être une chaîne ou un objet. Par exemple, vérifiez la longueur du nom d'utilisateur et ne le laissez pas être vide :

rules:{ 
 user:{ 
   required:true, 
   maxlength:16, 
   minlength:3 
 }, 
 ...... 
} 

En fait, nous pouvons spécifier directement l'attribut de classe d'entrée comme requis dans le code XHTML. La fonction est de ne pas lui permettre d'être vide, de sorte qu'il n'est pas nécessaire de l'écrire à plusieurs reprises dans la partie JS. De la même manière, pour vérifier le courrier électronique, etc., définissez directement l'attribut de classe d'entrée sur courrier électronique.
messages : définissez le message d'invite. Sous la forme clé : valeur, la clé est l'élément à vérifier et la valeur est une chaîne ou une fonction. Le message est invité lorsque la vérification échoue.

messages:{ 
 user:{ 
   required:"用户名不能为空！", 
   remote:"该用户名已存在，请换个其他的用户名！" 
 }, 
 ...... 
} 

Le JS de vérification impliqué dans cet exemple est écrit selon les règles ci-dessus. Le plug-in Validation encapsule de nombreuses méthodes de vérification de base, comme suit :
obligatoire :true doit avoir une valeur et ne peut pas être vide
remote:url peut être utilisé pour déterminer si le nom d'utilisateur existe déjà. Le serveur affiche true, indiquant que la vérification est réussie
. minlength:6 La longueur minimale est de 6
maxlength:16 La longueur maximale est de 16
rangelength : plage de longueurs
range :[10,20] La plage de valeurs est comprise entre 10 et 20
email :vrai e-mail de vérification
url : vrai URL de vérification
dateISO:true Vérifier le format de date 'aaaa-mm-jj'
chiffres : vrai ne peut être que des nombres
accept:'gif|jpg' n'accepte que les images avec le suffixe gif ou jpg. Extensions couramment utilisées pour vérifier les fichiers
equalTo : '#pass' est égal à la valeur du champ de formulaire, souvent utilisée pour vérifier la saisie répétée du mot de passe
De plus, j'ai également étendu plusieurs vérifications en fonction de la situation réelle du projet. Le code de vérification est dans validate-ex.js. Ce JS doit être chargé avant utilisation. Il fournit la vérification suivante :
userName:true Le nom d'utilisateur ne peut inclure que des caractères chinois, des lettres anglaises, des chiffres et des traits de soulignement
isMobile : véritable vérification du numéro de téléphone mobile
isPhone : véritable vérification du numéro de téléphone mobile du continent
isZipCode :véritable vérification du code postal
isIdCardNo : véritable vérification du numéro d'identification de la Chine continentale
ip : véritable vérification de l'adresse IP
Les méthodes de vérification fournies ci-dessus répondent essentiellement à nos besoins dans la plupart des projets. S'il existe d'autres exigences particulières en matière de vérification, elle peut être étendue comme suit :

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

Dépannage :
1. Lors de la vérification si le nom d'utilisateur existe dans le projet, il a été constaté que la vérification des entrées en chinois n'est pas prise en charge. Ma solution consiste à encoder le nom d'utilisateur avec encodeURIComponent, puis à utiliser le PHP d'arrière-plan pour urldecoder la valeur acceptée

user:{ 
  remote: { 
     url: "chk_user.php", //服务端验证程序 
     type: "post", //提交方式 
     data: { user: function() { 
       return encodeURIComponent($("#user").val()); //编码数据 
     }} 
  } 
}, 

Code du programme de vérification côté serveur chk_user.php :

<&#63;php 
$request = urldecode(trim($_POST['user'])); 
usleep(150000); 
$users = array('月光光', 'jeymii', 'Peter', 'helloweba'); 
$valid = 'true'; 
foreach($users as $user) { 
  if( strtolower($user) == $request ) 
    $valid = 'false'; 
} 
echo $valid; 
&#63;> 

我使用的服务端程序是PHP，您也可以使用ASP，ASP.NET，JAVA等。此外本例为了演示，用户名数据是直接写在服务端的，真正的应用是从数据库里取出的用户名数据，来和接收客户端的数据进行对比。
2、在验证checkbox和radio控件时，验证信息不会出现在最后的控件文本后面，而是直接跟在第一个控件的后面，不符合我们的要求。

解决办法是在validate({})追加以下代码：

errorPlacement: function(error, element) { 
  if ( element.is(":radio") ) 
    error.appendTo ( element.parent() ); 
  else if ( element.is(":checkbox") ) 
    error.appendTo ( element.parent() ); 
  else if ( element.is("input[name=captcha]") ) 
    error.appendTo ( element.parent() ); 
  else 
    error.insertAfter(element); 
} 

3、重置表单。Form表单原始的重置方法是reset自带

<input type="reset" value="重 置" /> 

点击“重置”按钮，表单元素将会重置，但是再运行Validation插件后，验证的提示信息并没重置，就是那些提示信息没有消失。感谢Validation提供了重置表单的方法：resetForm()

$("input:reset").click(function(){ 
  validate.resetForm(); 
});