个人使用jQuery.validate经验总结

在项目中表单验证使用了jQuery的validate插件进行开发（听朋友介绍国人开发的nice validator http://www.niceue.com/ 也是一款很好用的form验证插件，目前没用过），为了以后能熟练使用该插件，将使用过程中的一些心得进行总结，并没有囊括validate的所有知识点，只是以实现了验证功能为目的，以满足实际的业务需求出发将用到的只能说一部分的jquery validate知识进行总结。

1. 引入头文件

   （关于src与href的区别：src 的内容，是页面必不可少的一部分，是引入。href 的内容，是与该页面有关联，是引用。区别就是，引入和引用）

<script type="text/javascript" src="jQPlugin/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jQPlugin/jquery.validate.min.js"></script>

2.将验证规则写在js代码中
当然，你也可以将校验规则写到控件中，而我采用另一种方式，写在js代码中，感觉更便于管理吧。

<form action="adb" id="userForm">
    <p>用户名：<input name="uname" ></p>
    <p>性别：<input name="gender" type="radio" value="male" >男 <input name="gender" type="radio" value="female">女</p> 
    <p>密码：<input type="password" name="psw" id="psw"></p>
    <p>确认密码：<input type="password" name="confirmPsw"></p>
    <p>电子邮箱：<input name="email"></p>
    <p>出生日期：<input></p>
    <p>电话号码：<input></p>
    <p>兴趣：
        <input type="checkbox" name="favorite" value="basketball">篮球 
        <input type="checkbox" name="favorite" value="soccer">足球 
        <input type="checkbox" name="favorite" value="coding">java编程
        <input type="checkbox" name="favorite" value="guitar">吉他
        <input type="checkbox" name="favorite" value="reader">阅读
    </p>
    <p><input type="submit" value="提交"></p>
  </form>

上面是简单的一个form表单，用于用户注册，需要定义的验证规则如下：

1. 用户名不允许为空，输入字符长度控制在5-18之间
2. 性别没有默认值，所以为必填
3. 密码长度5-10之间，密码与确认密码要求一致
4. 邮箱为必填，符合邮箱地址格式
5. 电话号码不是必填，使用异步验证
6. 兴趣需要验证至少必填2个兴趣
7. 生日采用忽略验证的方式

$(document).ready(function() {
    $("#userForm").validate({
         rules:{
              uname:{
                 required:true,
                 minlength:2,
                 maxlength:18
             },
             email:{
                 required:true,
                 email:true
             },
             psw:{
                 required:true,
                 maxlength:10,
                 minlength:5
             },
             confirmPsw:{
                 required:true,
                 maxlength:10,
                 minlength:5,
                 equalTo: "#psw"  //标签id(最好标签name跟id属性都要写上)
             },
             gender:{
                 required:true
             }
           }
     });
});

出现问题1：提示信息是英文，改变默认的提示信息为中文；

做法很简单：

$(document).ready(function() {
    $("#userForm").validate({
         rules:{
                   ......
         }，
          messages:{
             uname:{
                 required:"用户名不能为空",
                 minlength:"不能输入长度小于5的字符串",
                 maxlength:"不能输入长度大于18的字符串"
             },
             email:{
                 required:"电子邮箱地址不能为空",
                 email:"电子邮箱地址格式有误"
             },
             psw:{
                 required:"密码不能为空",
                 maxlength:"密码长度不能超过10个字符",
                 minlength:"密码长度不能小于5个字符"
             },
             confirmPsw:{
                 required:"密码不能为空",
                 maxlength:"密码长度不能超过10个字符",
                 minlength:"密码长度不能小于5个字符",
                 equalTo: "两次密码输入不一致，请重新输入"
             },
             gender:{
                 required:"性别必须选一个"
             }
    })
})

出现的问题2：“性别”中“不为空”提示信息的出现位置不是我们想要的，我们可以修改提示信息的显示位置

$(document).ready(function(){
  $("#userForm").validate({
     rules:{
         ......
     },
     messages{
         ......
     },
     errorPlacement: function(error, element) {
        if (element.is(":radio"))
        {
            error.appendTo(element.parent());
        }
        else
        {
            error.appendTo(element.parent());
        }
    }
  });
})

补充一点：默认的提示信息颜色是黑色的，所以这里我更改了它的默认样式

根据图片显示，这里会发现validate插件会自动创建一个的标签来存放错误提示信息，知道了它的class属性后，改变它的样式我们只要：

<style>
#userForm label.error{
  color:red;
  padding-left:3px;
  font-size:12px;
}
input.error { border: 1px solid red; }
</style>

接着我扩展该验证的使用方法：

• 用异步验证
  所谓异步验证就是用ajax去调用后台程序，根据返回值“true”或“false”来做验证（只能接收true/false）,具体做法，用异步来验证输入的用户名是否已经存在

rules:{
         name:{
             required:true,
             minlength:5,
             maxlength:18,
             remote:"login.do" 
         }
    },

使用了remote属性，调用一个struts2的action,action中的方法如下：

public void  checkLogin() throws IOException
{
        HttpServletRequest request = ServletActionContext.getRequest();
        PrintWriter out = ServletActionContext.getResponse().getWriter();
        String uname = request.getParameter("name");
        EntityManager entityManager = BizBase.getEntityManager();
        List list = entityManager.createQuery("select u from User u where u.uname='"+ uname+"'").getResultList();
        if(list.size()>0) //存在该用户
        {
            out.print("false");
        }
        else
        {
            out.print("true");
        }
}

• 用其他方式替代默认的SUBMIT
  是否想在提交表单前，多添加个对话框？validate支持我们手动来修改表单提交时的动作：

$(document).ready(function(){
  $("#userForm").validate({
     rules:{
         ......
     },
     messages{
         ......
     },
     submitHandler:function(form){
        if(confirm("您确定要提交吗？"))
    {
        form.submit();  
    }
     }
  });
})

需要注意的事当设置了submitHandler参数后，就算同时设置了debug：true，当表单验证通过后一定会执行submitHandler方法，而不是还是处于debug状态，不提交表单；

• $.validator.setDefaults用法
  该setDefaults的方法的意思是，当一个页面中存在多个form的时候，
  在该方法中定义一些，多个form同时共同遵守的验证法则：

$(document).ready(function() {
   $.validator.setDefaults({ //validate的默认值，即对多个form表单同时有效（表示多个表单都使用同样的规则来验证name标签，提交表单时都有一个对话框）
        focusInvalid: false,//当验证有错误后，光标出现在表单内
        debug:true,
    rules:{
         name:{
             required:true,
             minlength:5,
             maxlength:18,
             remote:"login.do"
         }
    },
    submitHandler:function(form){
        if(confirm("您确定要提交吗？"))
        {
            form.submit();  
        }
     }
   });
   $("#userForm").validate({
       ....
   })
}

• 一些可以放在seDefaults中的参数，包括（验证的触发方式修改（onfocusout，onkeyup，focusInvalid），debug）
• 添加自定义校验
• radio 和 checkbox、select 的验证
  因为我的表单中要求验证兴趣至少需要选中2项，所以还需要对checkbox进行验证：

favorite:{
         required:true,
         minlength:2
 }

validate还有一些用法我暂时没有用到，网上有看到比较详细全面的教程，可参考：
http://www.cnblogs.com/linjiqin/p/3431835.html