jQuery中的异步校验

前言

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时的提示信息
        }
    }
}