Explication détaillée de l'utilisation du formulaire de validation JQurey validation_jquery

est un excellent plug-in capable de valider les formulaires clients et fournit de nombreuses propriétés et méthodes personnalisables avec une bonne évolutivité. 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, vérification répétée du mot de passe.

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 portable : vérification du numéro de téléphone portable en Chine continentale.

Adresse Web : vérification de l'adresse URL du site Web.

Date : validation du format de date standard.

Nombre : entier, vérification d'entier positif, vérification de plage de nombres.

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 : Adresse IP Vérification.

Code de vérification : vérification du code de vérification ajax.

Comment utiliser :

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>

En raison de contraintes d'espace, cet article n'intercepte qu'une petite partie du code HTML dans l'exemple. Pour le code XHTML détaillé, veuillez vous référer à la page Code source DEMO. Il convient de mentionner que j'ai donné au label un style de classe "obligatoire", et son rôle sera mentionné 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 des messages 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 renvoie vrai, 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

plage :[10,20] La plage de valeurs est comprise entre 10 et 20

e-mail :véritable e-mail de vérification

url : vraie 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 basées sur 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 est d'encoder le nom d'utilisateur avec encodeURIComponent, et en arrière-plan PHP puis urldecode 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('daimajiayuan.com', 'jeymii', 'Peter', 'daimajiayuan'); 
$valid = 'true'; 
foreach($users as $user) { 
  if( strtolower($user) == $request ) 
    $valid = 'false'; 
} 
echo $valid; 
&#63;> 

Le programme serveur que j'utilise est PHP, vous pouvez également utiliser ASP, ASP.NET, JAVA, etc. De plus, cet exemple est à titre de démonstration. Les données du nom d'utilisateur sont écrites directement sur le serveur. La véritable application consiste à récupérer les données du nom d'utilisateur de la base de données et à les comparer avec les données reçues du client.

2. Lors de la vérification des cases à cocher et des contrôles radio, les informations de vérification n'apparaîtront pas après le dernier texte de contrôle, mais directement après le premier contrôle, ce qui ne répond pas à nos exigences.

La solution est d'ajouter le code suivant pour valider({}) :

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自带

ece96ac9f78386f207f2557f088783a7 

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

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

以上所述就是本文的全部内容了，希望大家能够喜欢。