jQuery Validate之 remote用法
一、前言
之前博客已介绍过 jQuery Validate插件的使用 以及 自定义(正则)校验的使用;
如有想了解的小伙伴,请前往以下链接:
5分钟学会jQuery Validate之自定义(正则)校验
今天呢,在这里解锁下 jQuery Validate插件的 remote属性用法;
remote:支持异步(ajax)校验; eg:用户注册时,判断 手机号/用户名 是否存在。
在此记录一下,分享给大家。
二、remote用法
/**
* form表单 - remote用法
* flagSubmit:防止表单重复提交标识
*/
var flagSubmit = true;
function validateForm(){
$("#prodForm").validate({
// 是否验证后提交表单 true:只验证不提交表单
debug: false,
// 错误信息显示的位置
errorPlacement: function(error, element) {
// 将错误信息放在验证的元素后面
error.appendTo(element.parent());
// 自定义显示样式
error.css("color", "#ff0000");
},
// 验证成功后提交表单
submitHandler: function(form) {
if(prodFormAjax){
// 置为false,防止重复提交表单
prodFormAjax = false;
form.submit();
}
},
// 校验规则
rules: {
mobile: {
required: true,
remote:{
type: "GET",
url: "/yys/checkParams",
data:{
mobile : function() {
return $("#mobile").val();
}
}
}
}
},
// 校验提示信息
messages: {
mobile: {
required: '请填写手机号',
remote: '手机号已注册'
}
}
});
}
/**
* Controller - 查询手机号/用户是否重复
*/
// 方式一
@RequestMapping("/checkParams")
@ResponseBody
public boolean checkParams(HttpServletRequest request, String params) {
List<SellerVo> list = sellerService.checkParams(params);
if(CollectionUtils.isEmpty(list)) {
return true;
}
return false;
}
// 方式二
@RequestMapping("/checkParams")
@ResponseBody
public String checkParams(HttpServletRequest request, String params) {
List<SellerVo> list = sellerService.checkParams(params);
if(CollectionUtils.isEmpty(list)) {
return "true";
}
return "false";
}
// 方式三
@RequestMapping("/checkParams")
public void checkParams(HttpServletResponse response String params) {
PrintWriter pw = response.getWriter();
List<SellerVo> list = sellerService.checkParams(params);
if(CollectionUtils.isEmpty(list)) {
pw.println(true);
return;
}
pw.println(false);
}
Now ~ ~ ~写到这里,就写完了,如果有幸帮助到你,请记得关注我,共同一起见证我们的成长。