jQuery Validate插件ajax方式验证输入值的实例
2017-12-21 14:28
976 查看
项目中经常会遇到需要后台验证问题,如用户名、用户账号是否存在等。使用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()); }
参考文章:http://www.runoob.com/jquery/jquery-plugin-validate.html
以上这篇jQuery Validate插件ajax方式验证输入值的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- jQuery Validate插件ajax方式验证输入值
- 【转载】jquery validate验证插件,在ajax提交方式下的验证
- jquery validate验证插件,在ajax提交方式下的验证
- 实例详解jQuery表单验证插件validate
- jQuery validate插件实现ajax验证重复的2种方法
- 整合struts2 jQuery validate 插件的远程Ajax验证
- jquery.validate的ajax方式验证[可以一个控件下一次传递多个参数,已经成功通过验证]
- jQuery validate插件实现ajax验证重复的2种方法
- jquery表单验证插件(jquery.validate.js)的3种使用方式
- 表单验证代码实例:jquery.validate.js表单验证插件
- jquery的validate插件验证方式
- jQuery Validate插件 验证实例
- 实例详解jQuery表单验证插件validate
- jQuery验证插件validate使用详解
- formValidator输入验证、异步验证实例 + licenseImage验证码插件实例应用
- 0.jquery 验证,以及显示出现错误的地方 1.当用jquery.validate与ajax时候特别小心在每句后面的逗号问题,如果不需要的地方加上逗号会造成页面无法进入js验证
- 在JQuery的validate功能中使用remote实现Ajax功能后台验证
- Jquery Web 前端验证框架插件,jquery-validate资料,validation
- jquery form插件 上传/导入excel-ajax验证
- jquery vaildate 插件 remote验证方式应用