1. 程式人生 > >jQuery中的非同步校驗

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時的提示資訊
        }
    }
}