jquery.validate手動呼叫校驗
阿新 • • 發佈:2018-11-19
這兩天在做iframe巢狀的功能,關於iframe頁面中的一些校驗問題,需要用到手動jquery.validate的情況,先在做以記錄,方便日後檢視,程式碼如下:
//載入jquery的校驗方法 $("#inputForm").validate({ errorContainer: "#messageBox", errorPlacement: function(error, element) { $("#messageBox").text("輸入有誤,請先更正。"); if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){ error.appendTo(element.parent().parent()); } else { error.insertAfter(element); } } }); //提交時候手動觸發校驗 function submitFc(){ //校驗不通過 if(!$("#inputForm").valid()){ return; } if(confirm("確認要提交?")){ $("#inputForm").submit(); } }
這樣一來,不論巢狀多少的iframe都可以靈活的去校驗了。
傳統的提交校驗方法如下:
$("#inputForm").validate({ //校驗通過後執行的方法 submitHandler: function(form){ form.submit(); }, errorContainer: "#messageBox", //校驗失敗後執行的方法 errorPlacement: function(error, element) { $("#messageBox").text("輸入有誤,請先更正。"); if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){ error.appendTo(element.parent().parent()); } else { error.insertAfter(element); } } });
有了這些基礎的知識,校驗起來就方便了很多!
下面給出大體的程式碼,需要的話可以自己除錯一下!思路為:判斷iframe的數量,計算校驗通過的iframe的頁面數量,兩者相等表示全部校驗通過,然後再去執行其他的方法!
//所有iframe子頁面專案校驗 sonFormValidate : function(){ var length= $("#inputForm").find("iframe").length;//需要校驗的頁面數量 var i=0;//最後代表校驗通過的頁面 $("#inputForm").find("iframe").each(function(){ var okFlag=$(this).contents().find("#inputForm").valid(); if(okFlag){ i++; } }); //所有頁面校驗通過 if(length==i){ return true; }else{//部分頁面不通過 return false; } }
僅以此文章記錄在開發過程中遇到的問題,方便後續檢視校驗!