前言
web开发中经常遇到表单校验,其中最多的问题是唯一性校验。那么如何实现表单元素的异步校验?各种前端框架都有自己的实现方式。这里介绍一种基于jQuery的异步后台校验。
jquery.validation可谓是个强大的表单校验插件,当然也完美支持异步验证。可以用来实现唯一性校验,方便、快捷
引入文件jquery和jquery validation插件
$(function() {
$("form").validate({
submitHandler : function(form) {// 必须写在验证前面,否则无法ajax提交
ly.ajaxSubmit(form, {// 验证新增是否成功
type : "post",
dataType : "json",//ajaxSubmi带有文件上传的。不需要设置json
success : function(data) {
if (data == "success") {
layer.confirm('新增成功!是否关闭窗口?', function(index) {
parent.grid.loadData();
parent.layer.close(parent.pageii);
return false;
});
$("#form")[0].reset();
} else {
layer.msg('新增失败!', 3);
}
}
});
},
rules : {
"storeInfoFormMap.org_id" : {
required:true
},
"storeInfoFormMap.store_number" : {
required : true,
remote : { // 异步验证是否存在
type : "POST", //提交方式
url : "isExist.shtml", // 后台对应url
data : { // 设置请求参数
storeNumber : function() {
return $("#store_number").val();
}
}
}
},
messages : {
"storeInfoFormMap.org_id" : {
required : "请选择所属组织"
},
"storeInfoFormMap.store_number" : {
required : "请输入门店编号",
remote : "门店编号已存在" // 返回false时的提示信息
}
}
}