jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。
对于它基础的验证规则这里不做赘述，主要讲解它的异步验证。
需求如下：在一个form表中，需要根据用户ID来验证用户名，若数据库中已存在同样的用户ID对应同样的记录名称，则禁止插入或更新(更新时若记录名未发生改变，则需要再判断是否除此记录之外还存在同名称的记录)。
部分jsp页面代码如下：
1 <div class="control-group">
2 <label class="control-label">userId：</label>
3
4 <div class="controls">
5 <form:input path="userId" htmlEscape="false" maxlength="64" class="input-xlarge "/>
6 <span class="help-inline"><font color="red">*</font> </span>
7 </div>
8 </div>
9 <div class="control-group">
10 <label class="control-label">名称：</label>
11
12 <div class="controls">
13 <input type="hidden" id="oldName" name="oldName" value="${doctorPatientRecord.name}"/>
14 <form:input path="name" htmlEscape="false" maxlength="100" class="input-xlarge "/>
15 <span class="help-inline"><font color="red">*</font> </span>
16 </div>
17 </div>
上面有两个需要用到的标签：userId和name，另外为了更新时是否为改变记录名而添加了一个新的input标签，存放的是原记录名这些标签中有大量的属性设置，其实是非必须的，一定要用到的有标签的name属性，因为jQuery 验证的时候是根据name属性名来查找对象的。
jQuery代码如下：
rules: {
userId: {required: true, remote: "${ctx}/doctor/doctorpatientrecord/checkUser?"},
name: {
required: true,
remote: {
url: "${ctx}/doctor/doctorpatientrecord/checkName",
type: "post",
dataType: "json",
data: {
oldName:‘${doctorPatientRecord.name}‘,
name: function () {
return $("#name").val();
},
userId: function () {
return $("#userId").val();
}
}
}
}
},
messages: {
userId: {required: "用户ID不能为空", remote: "用户ID不存在"},
name: {required: "记录名不能为空", remote: "记录名已存在"}
},
jQuery代码中一共有两个验证，一个是验证userId一个是验证name，也就是我们的需求验证。其中userId的验证看起来很简便，由于个人理解及了解不多，只知道相对于name的验证方式，userId所使用的这种验证方式无法获取到最新的标签值。而在form中，userId的值是默认不会发生改变的，因此可以采用这种方法，userId的值已经传入到后台而不需要特地在url后去添加一个userId=xxxx；
name的验证由于要获取到最新的值，因此只能采用这种比较笨重的方法，设置url,跳转方式为post,数据类型为json，需要传递的数据放在data 中，包括：userId，oldName，name。
后台接收处理的方法代码如下：
@RequestMapping(value = "checkUser")
public String checkUser(String userId) {
if (userId != null) {
UserToken userToken = new UserToken();
userToken.setUserId(userId);
userToken = doctorUserTokenDao.get(userToken);
if (userToken != null) {
return "true";
}
}
return "false";
}
/**
* 验证记录名是否有效
*/
@ResponseBody
@RequiresPermissions("doctor:doctorpatientrecord:edit")
@RequestMapping(value = "checkName")
public String checkName(String oldName, String name, String userId) {
if (name != null && name.equals(oldName)) {
return "true";
} else if (StringUtils.isNotBlank(name) && StringUtils.isNotBlank(userId)) {
DoctorPatientRecord doctorPatientRecord = new DoctorPatientRecord();
doctorPatientRecord.setName(name);
doctorPatientRecord.setUserId(userId);
List<DoctorPatientRecord> doctorPatientRecordList = doctorPatientRecordService.findListy(doctorPatientRecord);
if (doctorPatientRecordList.size() == 0) {
return "true";
}
}
return "false";
}
jQuery validate 后台验证返回的结果只能是 true 字符串或者false字符串，不能是其他的值。后台接收的参数命名必须和jQuery 传过来的参数保持一致。