jQuery Validate插件ajax方式验证输入值的实例
项目中经常会遇到需要后台验证问题,如用户名、用户账号是否存在等。使用jQueryValidate插件可以使用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.后台(SpringMVC测试)
后台响应只能输出true或false,不能有其他数据,true:验证通过,false:验证失败;设置返回类型为boolean或String都可以
(1).返回boolean
@RequestMapping("/checkUsername") public@ResponseBodybooleancheckUsername(@RequestParamStringusername){ //测试 return!"test".equals(username); }
(2).返回String
@RequestMapping("/checkUsername") public@ResponseBodyStringcheckUsername(@RequestParamStringusername){ //测试 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@ResponseBodybooleancheckUsername(Useruser,@RequestParamStringextra){ //测试 System.out.println(extra); return!"test".equals(user.getUsername()); }
参考文章:http://www.runoob.com/jquery/jquery-plugin-validate.html
以上这篇jQueryValidate插件ajax方式验证输入值的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。