下面我就为大家分享一篇jquery validate插件ajax方式验证输入值的实例，具有很好的参考价值，希望对大家有所帮助。
项目中经常会遇到需要后台验证问题，如用户名、用户账号是否存在等。使用jQuery Validate插件可以使用remote校验规则完成验证。
示例：
一.基本用法
1.需要验证的表单
2.js
使用remote校验规则，最简单粗暴的写法是remote: url，此时请求的url后面自动拼接当前验证的值，例如下面的写法，请求的url为：xxx/checkUsername.do?username=test
// 导入jquery、validte库略
$(function() {
$.validator.setDefaults({
submitHandler: function(form) {
// 验证通过处理
...
}
});
$("#registForm").validate({
rules: {
username: {
required: true,
remote: "checkUsername.do"
},
},
messages: {
username: {
required: "用户名不能为空",
remote: "用户名已经存在"
}
}
});
});3.后台（Spring MVC测试）
后台响应只能输出true或false，不能有其他数据，true：验证通过，false：验证失败；设置返回类型为boolean或String都可以
(1).返回boolean
@RequestMapping("/checkUsername")
public @ResponseBody boolean checkUsername(@RequestParam String username) {
// 测试
return !"test".equals(username);
}(2).返回String
@RequestMapping("/checkUsername")
public @ResponseBody String checkUsername(@RequestParam String username) {
// 测试
return !"test".equals(username) ? "true" : "false";
}二.其他用法
上面的用法不能满足实际的需求，有时候会有需要提交其他参数、参数名和属性名不一致或请求方式为POST的情况，写法如下：
A+是一个完全响应式，基于Bootstrap3.3.7最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对
1.js
使用data选项，也就是jQuery的$.ajax({...})的写法；
提交的数据需要通过函数返回值的方式，直接写值有问题；
默认会提交当前验证的值，也就是下例中的 username: xxx会被默认作为参数提交
....
username: {
required: true,
remote: {
url: "checkUsername.do",
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
username: function() {
return $("#username").val();
},
extra: function() {
return "额外信息";
}
}
}
}2.后台
限制了必须为POST方式请求
@RequestMapping(value = "/checkUsername", method = RequestMethod.POST)
public @ResponseBody boolean checkUsername(User user, @RequestParam String extra) {
// 测试
System.out.println(extra);
return !"test".equals(user.getUsername());
}上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
