jQuery中的非同步校驗
阿新 • • 發佈:2019-02-10
前言
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時的提示資訊 } } }