这个是这个插件的官网和我找到的一个中文博客。(虽然插件的名字叫做jquery.validte.js,但其实,这个插件的名字叫jquery validation)。

基础的用法可以去看冷子欲的文章或者上面的博客,我这里就不详细介绍了。

首先最重要的一点,所有要验证的域都要在form里,同时这些域都要有name属性。

1. 默认validate参数的初始化:

   这个插件如果要用,肯定很多页面都会用到,毕竟如果有表单,就需要验证。而且这个插件的默认语言是英语,所以我们要转换成汉语。我们当然不希望在每个页面的js都写一遍message。所以我们可以在公用的js里面对默认message进行初始化。

1. jQuery.extend(jQuery.validator.messages,{
2. :"必选字段",
3. :"请修正该字段",
4. :"请输入正确格式的电子邮件",
5. :"请输入合法的网址",
6. :"请输入合法的日期",
7. :"请输入合法的日期 (ISO).",
8. :"请输入合法的数字",
9. :"只能输入整数",
10. :"请输入合法的信用卡号",
11. :"请再次输入相同的值",
12. :"请输入拥有合法后缀名的字符串",
13. :.validator.format("请输入一个长度最多是 {0} 的字符串"),
14. :.validator.format("请输入一个长度最少是 {0} 的字符串"),
15. :.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
16. :.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
17. :.validator.format("请输入一个最大为 {0} 的值"),
18. :.validator.format("请输入一个最小为 {0} 的值")
19. });

 

 同时,我们也可以对一些其它参数进行初始化:

1. $.validator.setDefaults({
2. :"fieldError",// 错误的时候添加什么class
3. :".ignore",// 默认忽略那些域的验证
4. :true,
5. :false,
6. :function(error,){
7. // 有错误了怎么办
8. },
9. :function(form){
10. // 所有验证通过怎么办
11. }
12. });

 

 2. 添加验证的规则

验证的规则添加有很多种冷子欲之前的文章介绍的形式:

1. $("#form").validate({
2. :true,//调试模式
3. :{
4. :{
5. :true,//开启必填项
6. :[3,10]//请输入的数值在3至10位之间
7. };
8. };
9. });

 

 上面的验证规则都是写死的,比如required和rangelength都是插件内定好的规则,当然这些规则也不一定都能满足我们的要求,那么我们该怎么办?jquery.validation提供了一个添加自定义规则的方法:addMethod:

1. $.validator.addMethod("usernameCheck",function(value,){
2. return/^[0-9a-z_A-Z]+$/.test(value);
3. },"用户名格式错误");
4.  
5. $("form").validate({
6. :{
7. :{
8. :true,
9. :2,
10. :20,
11. :true
12. :{
13. :"check_username.jhtml",
14. :false
15. }
16. }
17. }
18. });

 

 上面的插件会验证用户名是否必填,长度,用户名是否合法(也可以用内置的pattern进行验证),同时用ajax验证用户名是否重复啊什么的。

有的时候,你可能name不是都一样,比如说你要提交一组的数据,你的数据格式可能是这个样子的:

    1. <inputtype="text"class="username"name="member[0].username"/>
    2. <inputtype="text"class="username"name="member[1].username"/>
    3. <inputtype="text"class="username"name="member[2].username"/>
    4. <inputtype="text"class="username"name="member[3].username"/>
    5. <inputtype="text"class="username"name="member[4].username"/>

     

     我们当然不愿意在rules里面对5个分别写验证规则,太浪费时间,经历,那么我们可以用addClassRules方法,同样的效果,作用在对应的class上面。

      1. $.validator.addClassRules({
      2. :{
      3. :true,
      4. :2,
      5. :20,
      6. :true
      7. :{
      8. :"check_username.jhtml",
      9. :false
      10. }
      11. }
      12. });
      13. ("form").validate();// 别忘了初始化

       3. 验证错误了怎么办?

      通常这个插件都是让在验证域的后面,如果我们是一排的同name的checkbox呢?那么他会把错误信息放到第一个checkbox的后面,这样会很丑,我们当然是想放到最后一个checkbox的后面,那么我们用errorPlacement方法:

      1. $("form").validate({
      2. :function(error,){
      3. if($(element).is("input[type='checkbox']")){
      4. .appendTo($(element).parent());// 放到最后一个
      5. }else{
      6. (element).after(error);// 放在错误域的后面
      7. }
      8. }
      9. });

       4. 验证通过了,然后呢?

      我们通常可能验证通过以后,并不想直接提交表单,或许我们也只是用表单进行验证,然后通过ajax提交表单,那么我们可以用submitHandler方法:

      1. $("form").validate({
      2. :function(form){
      3. // 验证成功以后做点你想做的事情
      4. .submit();// 如果不想提交,就return false。
      5. }
      6. });

       

       5. 怎么通过js直接验证?

      有的时候,即使我们没有编辑这个域,我们也想要验证这个域是否正确,那么怎么办?用valid()方法。这个方法可以作用到一个form,也可以作用到一个域,验证的同时,返回true/false值。

      1. var=("input").valid();
      2. var=("form").valid();

       

       6. 还有更多功能,这里就不介绍了,大家可以看上面提供的官网和博客地址。