(function($) {
var isformValidationPostBack=true;
var isformValidation = false;
$.extend({
formValidationDiv: function(formID) {
if(isformValidationPostBack){
var h='<div style="width:160px;height:40px;background-color:#F0F8FF;z-index:20;position:absolute;display: none;box-shadow: 1px 1px 3px gray;" id="submitValidate">'
h+='<div style="position: relative;top: -23px;width:0px;height: 0px;border-top:12px solid transparent;border-left:12px solid transparent;border-bottom:12px solid rgb(240, 248, 255);border-right:12px solid transparent;"></div>'
h+='<div style=" position: relative;top: -13px;"> <i id="file_i" class="fa fa-exclamation-triangle" style="color:#FF8C00;font-size:22px;margin-top: -1px;margin-left: 4px;"></i><label style="margin-left: 10px;vertical-align: top;color:black"></label></div></div>'
$("body").append(h);
isformValidationPostBack=false
}
var alltxt = $("#"+formID).find("input");
for (var i=0;i<alltxt.length;i++) {
var thisTop =alltxt[i].getBoundingClientRect();
var thisHeight = alltxt[i].getBoundingClientRect().height;
var thisPattern = alltxt[i].getAttribute("pattern");
var reg = new RegExp(thisPattern);
if(alltxt[i].getAttribute("required")) { //非空验证
if(alltxt[i].value == "") {
$("#submitValidate").css({
"top": (thisTop.top + thisHeight + 17),
"left": thisTop.left,
"width": (44 + alltxt[i].getAttribute("data-miss").length * 16)
})
$("#submitValidate").find("label").text(alltxt[i].getAttribute("data-miss"));
$("#submitValidate").show()
isformValidation=false
break
} else if(alltxt[i].getAttribute("pattern")) { //规则验证
if(!reg.test(alltxt[i].value)) {
$("#submitValidate").css({
"top": (thisTop.top + thisHeight + 17),
"left": thisTop.left,
"width": (44 + alltxt[i].getAttribute("data-miss").length * 16)
})
$("#submitValidate").find("label").text(alltxt[i].getAttribute("data-pattern"))
$("#submitValidate").show()
isformValidation=false
break
}else{
isformValidation=true;
}
} else {
$("#submitValidate").hide();
isformValidation=true;
}
}
}
return isformValidation;
}
})
})(jQuery)
2.当ajax提交表单时调用
$("#btnt").click(function(){
alert(jQuery.formValidationDiv("test"));//如果通过了验证就返回true 否则就返回false
})
3.html
<div id="test">
<form>
<input type="text" id="one" required="required" data-miss="姓名是顶顶顶顶顶是打发第三方是必填字段" data-pattern="请输入三个字母" pattern="\b[A-Za-z]{3}\b" />
<input type="text" id="two" required="required" data-miss="性别是必填字段" />
<input type="text" id="three" />
<input type="button" value="测试" id="btn" />
<input type="button" value="测试插件" id="btnt"/>
<input type="submit" />
</form>
</div>
<!--<div style="width:160px;height:40px;background-color:#F0F8FF;z-index:20;position:absolute;display: none;box-shadow: 1px 1px 3px gray;" id="submitValidate">
<div style="position: relative;top: -23px;width:0px;height: 0px;border-top:12px solid transparent;border-left:12px solid transparent;border-bottom:12px solid rgb(240, 248, 255);border-right:12px solid transparent;"></div>
<div style=" position: relative;top: -13px;"> <i id="file_i" class="fa fa-exclamation-triangle" style="color:#FF8C00;font-size:22px;margin-top: -1px;margin-left: 4px;"></i><label style="margin-left: 10px;vertical-align: top;color:black"></label></div>
</div>-->
