这两天在做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;
}
}
仅以此文章记录在开发过程中遇到的问题,方便后续查看校验!