个人使用jQuery.validate经验总结

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

引入头文件

（关于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表单，用于用户注册，需要定义的验证规则如下：

用户名不允许为空，输入字符长度控制在5-18之间

性别没有默认值，所以为必填

密码长度5-10之间，密码与确认密码要求一致

邮箱为必填，符合邮箱地址格式

电话号码不是必填，使用异步验证

兴趣需要验证至少必填2个兴趣

生日采用忽略验证的方式

$(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