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());
}
参考文章：http://www.runoob.com/jquery/jquery-plugin-validate.html
以上这篇jQuery Validate插件ajax方式验证输入值的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了jquery如何扑捉回车键触发的事件,需要的朋友可以参考下2014-03-03
这篇文章主要介绍了JQuery特殊效果和链式调用操作,结合实例形式分析总结了jQuery各种常见显示效果与所使用的函数,以及链式调用显示层级菜单功能相关操作技巧,需要的朋友可以参考下2019-05-05
现在我要在浏览器里读取缓存，因为ajax请求的数据很大，请求一次就够了。但是问题来了，在FF里面，是没有ajax缓存的，也就是每次都会触发ajax请求，这点和IE不一样2013-12-12
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码 ，比页面刷新更好，用户体验更好，需要的朋友可以参考下。2010-09-09
这篇文章主要介绍了Easyui Treegrid改变默认图标的方法的相关资料,需要的朋友可以参考下2016-04-04
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
这篇文章主要介绍了jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果,涉及jquery鼠标事件及页面元素动态样式设置的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了关于jquery layui弹出层的使用方法,需要的朋友可以参考下2018-04-04
下面小编就为大家带来一篇jquery基本选择器匹配多个元素的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
本文将结合实例使用jquery背景动画插件，将数字作为背景图片，定时让背景图片滚动起来，从而实现了滚动数字的效果，感兴趣的小伙伴们可以参考一下2015-11-11
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件echarts实现的多柱子柱状图效果,结合完整实例形式分析了echarts绘制多柱子柱状图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
最新评论