项目中经常会遇到需要后台验证问题,如用户名、用户账号是否存在等。使用jQuery Validate插件可以使用remote校验规则完成验证。
示例:
一.基本用法
1.需要验证的表单
2.js
使用remote校验规则,最简单粗暴的写法是remote: url,此时请求的url后面自动拼接当前验证的值,例如下面的写法,请求的url为:xxx/checkUsername.do?username=test
$("#registForm").validate({
rules: {
username: {
<a href="https://www.jb51.cc/tag/required/" target="_blank" class="keywords">required</a>: true,remote: "checkUsername.do"
},},messages: {
username: {
<a href="https://www.jb51.cc/tag/required/" target="_blank" class="keywords">required</a>: "<a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>不能为空",remote: "<a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>已经存在"
}
}
});
});
3.后台(Spring MVC测试)
后台响应只能输出true或false,不能有其他数据,true:验证通过,false:验证失败;设置返回类型为boolean或String都可以
(1).返回boolean
(2).返回String
二.其他用法
上面的用法不能满足实际的需求,有时候会有需要提交其他参数、参数名和属性名不一致或请求方式为POST的情况,写法如下:
1.js
使用data选项,也就是jQuery的$.ajax({...})的写法;
提交的数据需要通过函数返回值的方式,直接写值有问题;
默认会提交当前验证的值,也就是下例中的 username: xxx会被默认作为参数提交
required: true,remote: {
url: "checkUsername.do",type: "post",//数据发送方式
dataType: "json",//接受数据格式
data: { //要传递的数据
username: function() {
return $("#username").val();
},extra: function() {
return "额外信息";
}
}
}
}
2.后台
限制了必须为POST方式请求
参考文章:http://www.runoob.com/jquery/jquery-plugin-validate.html
以上这篇jQuery Validate插件ajax方式验证输入值的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。
原文链接:https://www.f2er.com/jquery/34571.html