下面我就为大家分享一篇jquery validate插件ajax方式验证输入值的实例，具有很好的参考价值，希望对大家有所帮助。
项目中经常会遇到需要后台验证问题，如用户名、用户账号是否存在等。使用jquery validate插件可以使用remote校验规则完成验证。
示例：
一.基本用法
1.需要验证的表单
<form id="registform"> <input type="text" id="username" name="username"> </form>
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的情况，写法如下：
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());}
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
有关使用bootstrap-table.js实现扩展分页工具栏功能
在js中如何实现浮动碰撞
在js中如何控制鼠标拒绝点击按钮
以上就是在jquery中如何使用validate插件的详细内容。