小编给大家分享一下jQuery中Validate插件ajax方式验证输入值的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联是一家专业提供北屯企业网站建设,专注与成都网站建设、成都网站设计、H5场景定制、小程序制作等业务。10年已为北屯众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。使用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的情况,写法如下:
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()); }
以上是“jQuery中Validate插件ajax方式验证输入值的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。