Explication détaillée du plug-in de validation jQuery Validate_jquery

validate est un bon plug-in jq qui fournit des fonctions de validation puissantes, facilitant la validation des formulaires clients. Il fournit également un grand nombre d'options de personnalisation pour répondre aux divers besoins des applications. Le plugin regroupe un ensemble de méthodes de validation utiles, notamment la validation d'URL et d'e-mails, et fournit une API pour écrire des méthodes définies par l'utilisateur.

L'occasion la plus courante d'utiliser JavaScript est la validation de formulaire, et jQuery, en tant qu'excellente bibliothèque JavaScript, fournit également un excellent plug-in de validation de formulaire ----Validation. Validation est l'un des plug-ins jQuery les plus anciens, a été vérifié par différents projets à travers le monde et a été salué par de nombreux développeurs Web. En tant que bibliothèque de méthodes de vérification standard, la validation présente les caractéristiques suivantes :

1. Règles de validation intégrées : elle dispose de 19 types de règles de validation intégrées telles que les règles obligatoires, les numéros, les e-mails, les URL et les numéros de carte de crédit.
2. Personnalisation Règles de vérification : les règles de vérification peuvent être facilement personnalisées
3. Invites d'informations de vérification simples et puissantes : des invites d'informations de vérification sont fournies par défaut et la fonction de personnalisation des informations d'invite par défaut est fournie
4. . Vérification en temps réel : possibilité de réussite. L'événement keyup ou blur déclenche la validation, pas seulement lorsque le formulaire est soumis

adresse de téléchargement validate.js : http://plugins.jquery.com/project/validate<.>Adresse de téléchargement metadata.js :
http://plugins.jquery.com/project/metadata Utilisation :

1. Présentez la bibliothèque jQuery et le plug-in de validation <.>

Le code est le suivant :

2. Déterminez quel formulaire doit être vérifié

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

Le code est comme suit :

3. Coder les règles de vérification pour différents champs et définir les attributs correspondants des champs

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

Le code est le suivant :

class="required"   必须填写  
class="required email"        必须填写且内容符合Email格式验证  
class="url"             符合URL格式验证  
minlength="2"      最小长度为2  
可验证的规则有19种：
[javascript] view plaincopyprint?
required:      必选字段  
remote:        "请修正该字段",  
email:         电子邮件验证  
url:           网址验证  
date:          日期验证  
dateISO:       日期 (ISO)验证  
dateDE:  
number:        数字验证  
numberDE:  
digits:        只能输入整数  
creditcard:    信用卡号验证  
equalTo:       ”请再次输入相同的值“验证  
accept:        拥有合法后缀名的字符串验证  
maxlength/minlength:    最大/最小长度验证  
rangelength:     字符串长度范围验证  
range:           数字范围验证  
max/min:         最大值/最小值验证

doit être introduit. Le code js

est le suivant :

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

Le code HTML

initialisé est le suivant :

Regardez d'abord les spécifications des paramètres par défaut

<script type="text/javascript">
$(function(){
　$("#commentForm").validate() 
})
</script>
<form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>一个简单的validate验证带验证提示的评论例子</legend>
   <p>
     <label for="cusername">姓名</label>
     <em>*</em><input id="cusername" name="username" size="25" class="required" minlength="2" />
   </p>
   <p>
     <label for="cemail">电子邮件</label>
     <em>*</em><input id="cemail" name="email" size="25" class="required email"  />
   </p>
   <p>
     <label for="curl">网址</label>
     <em>  </em><input id="curl" name="url" size="25" class="url" />
   </p>
   <p>
     <label for="ccomment">你的评论</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22" class="required" ></textarea>
   </p>
 <p>
     <input class="submit" type="submit" value="提交"/>
   </p>

Série nombre

Règle

Description

序号	规则	描述
1	required:true	必须输入的字段。
2	remote:"check.php"	使用 ajax 方法调用 check.php 验证输入值。
3	email:true	必须输入正确格式的电子邮件。
4	url:true	必须输入正确格式的网址。
5	date:true	必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6	dateISO:true	必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7	number:true	必须输入合法的数字（负数，小数）。
8	digits:true	必须输入整数。
9	creditcard:	必须输入合法的信用卡号。
10	equalTo:"#field"	输入值必须和 #field 相同。
11	accept:	输入拥有合法后缀名的字符串（上传文件的后缀）。
12	maxlength:5	输入长度最多是 5 的字符串（汉字算一个字符）。
13	minlength:10	输入长度最小是 10 的字符串（汉字算一个字符）。
14	rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15	range:[5,10]	输入值必须介于 5 和 10 之间。
16	max:5	输入值不能大于 5。
17	min:10	输入值不能小于 10。

1

obligatoire :true

Un champ qui doit être renseigné.

2

remote :"check.php"

Utilisez la méthode ajax pour appeler check.php afin de vérifier la valeur d'entrée .

3

email:true

Vous devez saisir un email correctement formaté.

4

url:true

Vous devez saisir l'URL dans le format correct.

5

date:true

Une date au format correct doit être saisie. Erreur ie6 de vérification de la date, à utiliser avec prudence.

6

dateISO:true

Vous devez saisir la date (ISO) au format correct, par exemple : 2009- 23/06, 22/01/1998. Seul le format est vérifié, pas la validité.

7

number:true

Les nombres légaux (nombres négatifs, décimales) doivent être saisis.

8

chiffres : vrai

Un entier doit être saisi.

9

Carte de crédit :

Un numéro de carte de crédit valide doit être saisi.

10

equalTo:"#field"

La valeur d'entrée doit être la même que #field.

11

accepter :

Entrez une chaîne avec un suffixe légal (le suffixe du fichier téléchargé).

12

maxlength:5

Entrez une chaîne d'une longueur maximale de 5 (les caractères chinois comptent pour un caractère).

13

minlength:10

Entrez une chaîne d'une longueur minimale de 10 (les caractères chinois comptent pour un caractère).

14

rangelength :[5,10]

La longueur saisie doit être comprise entre 5 et 10 (les caractères chinois comptent pour un personnage).

15

plage :[5,10]

La valeur d'entrée doit être comprise entre 5 et 10.

16

max:5

La valeur d'entrée ne peut pas être supérieure à 5.

17

min:10

La valeur d'entrée ne peut pas être inférieure à 10.

required表示必须填写的

email表示必须正确的邮箱

把验证的规格写在HTML内的class内，方法欠妥，后期的维护增加成本，没有实现行为与结构的分离

所以，可以想把HTML内的class都清空，如下:

代码如下:

<form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>一个简单的validate验证带验证提示的评论例子</legend>
   <p>
     <label for="cusername">姓名</label>
     <em>*</em><input id="cusername" name="username" size="25" />
   </p>
   <p>
     <label for="cemail">电子邮件</label>
     <em>*</em><input id="cemail" name="email" size="25"  />
   </p>
   <p>
     <label for="curl">网址</label>
     <em>  </em><input id="curl" name="url" size="25" />
   </p>
   <p>
     <label for="ccomment">你的评论</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22" ></textarea>
   </p>
 <p>
     <input class="submit" type="submit" value="提交"/>
   </p>

js

代码如下:

 $(document).ready(function(){
    $("#commentForm").validate({
      rules:{
        username:{
          required:true,
          minlength:2
        },
        email:{
          required:true,
          email:true
        },
        url:"url",
        comment:"required",
        valcode: {
          formula: "7+9"  
        }
      }
    });
  });
  </script>

因为默认的提示是英文的，可以改写成

 代码如下:

jQuery.extend(jQuery.validator.messages, {
        required: "必选字段",
        remote: "请修正该字段",
        email: "请输入正确格式的电子邮件",
        url: "请输入合法的网址",
        date: "请输入合法的日期",
        dateISO: "请输入合法的日期 (ISO).",
        number: "请输入合法的数字",
        digits: "只能输入整数",
        creditcard: "请输入合法的信用卡号",
        equalTo: "请再次输入相同的值",
        accept: "请输入拥有合法后缀名的字符串",
        maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"),
        minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"),
        rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
        range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"),
        max: jQuery.format("请输入一个最大为 {0} 的值"),
        min: jQuery.format("请输入一个最小为 {0} 的值")
});

建议新建一个js,放到validate.js 下面.

关于提示的美化

 代码如下:

errorElement:"em"

　　创建一个标签，可以自定义

代码如下:

success:function(label){
        label.text(" ").addClass('success')
      }

这里的参数label是指向创建的标签，这里也就是”em“ 然后情况自己的内容，在加上自己的class就可以了

完整的js

代码如下:

  $("#commentForm").validate({
      rules:{
        username:{
          required:true,
          minlength:2
        },
        email:{
          required:true,
          email:true
        },
        url:"url",
        comment:"required",
      },
      errorElement:"em",
      success:function(label){
        label.text(" ").addClass('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;
}

.success放到.error下面。。。唔唔。。具体的情况。。只可体会不可言会。。唔。。

在做项目的过程中千变万化，有时候要满足不同的需求，validate也可以单独的修改验证的信息。。

例如：

代码如下:

  messages:{
        username:{
          required:"主人,我要填的满满的",
          minlength:"哎唷,长度不够耶"
        }
   }

完整的js

 代码如下:

 $("#commentForm").validate({
      rules:{
        username:{
          required:true,
          minlength:2
        },
        email:{
          required:true,
          email:true
        },
        url:"url",
        comment:"required",
        valcode: {
          formula: "7+9"  
        }
      },
      messages:{
        username:{
          required:"主人,我要填的满满的",
          minlength:"哎唷,长度不够耶"
        }
      },
      errorElement:"em",
      success:function(label){
        label.text(" ").addClass('success')
      }
    });

这里就可以啦。

关于自定义验证规则

增加一段HTML代码

代码如下:

 <p>
     <label for="cvalcode">验证码</label>
     <input id="valcode" name="valcode"  />=7+9
   </p>

自定一个规则

 代码如下:

$.validator.addMethod("formula",function(value,element,param){
      return value==eval(param)
    },"请正确输入验证信息");

formula是需要验证方法的名字 好比如required 必须的。
value返回的当前input的value值
param返回的是当前自定义的验证格式 好比如：7+9
在试用了eval方法 让字符串相加

完整的js

代码如下:

$.validator.addMethod("formula",function(value,element,param){
      return value==eval(param)
    },"请正确输入验证信息");
    $("#commentForm").validate({
      rules:{
        username:{
          required:true,
          minlength:2
        },
        email:{
          required:true,
          email:true
        },
        url:"url",
        comment:"required",
        valcode: {
          formula: "7+9"  
        }
      },
      messages:{
        username:{
          required:"主人,我要填的满满的",
          minlength:"哎唷,长度不够耶"
        }
      },
      errorElement:"em",
      success:function(label){
        label.text(" ").addClass('success')
      }
    });

完