Jquery Validation 多按钮，多表单，分组验证

来源：互联网发布：风险控制矩阵文档编辑：程序博客网时间：2024/05/16 18:03

真正做到了多按钮的验证。

在用户输入的时候就可以验证，而网上大部分多按钮验证都是必须要用户点击按钮后才可以验证。

研究了两天终于弄出来了，不知道两天是过长还是过段，现在分享给小伙伴们。

小伙伴们支持下啊，转载保留原本地址：

http://blog.csdn.net/xujunheng/article/details/39079595

<html>

$().ready(function () {

//form1
$("#form1").validate({
focusCleanup: false,
focusInvalid: false,
rules: {
txtEmail: {
required: true,
email: true
}
}, //rules
messages: {
txtEmail: {
required: "请输入Email",
email: "用户名不符合规则"
}
}//messages
});

//form2
$("#form2").validate({
focusCleanup: false,
focusInvalid: false,
rules: {
txtPhone: {
required: true,
isMobile: true
}
}, //rules
messages: {
txtPhone: {
required: "请输入手机号码",
isMobile: "手机号码不规则"
}
}//messages
});

//form3
$("#form3").validate({
focusCleanup: false,
focusInvalid: false,
rules: {
txtEnglish: {
required: true,
isEnglish: true
}
}, //rules
messages: {
txtEnglish: {
required: "请输入英文字符",
isEnglish: "输入字符必须为英文"
}
}//messages
});

//form4
$("#form4").validate({
focusCleanup: false,
focusInvalid: false,
rules: {
txtChinese: {
required: true,
isChinese: true
}
}, //rules
messages: {
txtChinese: {
required: "请输入汉字",
isChinese: "输入字符必须为汉字"
}
}//messages
});

//form5
$("#form5").validate({
focusCleanup: false,
focusInvalid: false,
rules: {
txtInt: {
required: true,
isInteger: true
},
txtFloat: {
required: true,
isFloat: true
}
}, //rules
messages: {
txtInt: {
required: "请输入数字",
isInteger: "输入字符必须为数字"
},
txtFloat: {
required: "请输入浮点数",
isFloat: "请输入浮点数的格式"
}
}//messages
});

//form6
$("#form6").validate({
focusCleanup: false,
focusInvalid: false,
rules: {
txtCardNo: {
required: true,
isIdCardNo: true
}
}, //rules
messages: {
txtCardNo: {
required: "请输入身份证号码",
isIdCardNo: "输入身份证号码格式"
}
}//messages
});

//btnEmail
$("#btnEmail").click(function () {
if ($("#form1").valid()) {
alert("Yes");
form1.submit();
}
else {
alert("NO");
}
});

//btnPhone
$("#btnPhone").click(function () {
if ($("#form2").valid()) {
alert("Yes");
form2.submit();
}
else {
alert("NO");
}
});

//btnEnglish
$("#btnEnglish").click(function () {
if ($("#form3").valid()) {
alert("Yes");
form3.submit();
}
else {
alert("NO");
}
});

//btnChinese
$("#btnChinese").click(function () {
//Chine 和 Email一同验证
if ($("#form4").valid() && $("#form1").valid()) {
alert("Yes");
form4.submit();
}
else {
alert("NO");
}
});

//btnInt
$("#btnInt").click(function () {
if ($("#form5").valid()) {
alert("Yes");
form5.submit();
}
else {
alert("NO");
}
});

//btnInt
$("#btnCardNo").click(function () {
if ($("#form6").valid()) {
alert("Yes");
form6.submit();
}
else {
alert("NO");
}
});

});
</script>
<style type="text/css">
.style1
{
width: 100%;
}
</style>
</head>
<body>
<form id="form1" name="form1">
<div>
<span>Email</span>
<input id="txtEmail" name="txtEmail" type="text" />
</div>
</form>
<hr />
<table class="style1">
<tr>
<td>
<form id="form2" name="form2">
<span>Phone</span>
<input id="txtPhone" name="txtPhone" type="text" />
</form>
</td>
<td>
 
</td>
</tr>
<tr>
<td>
这里的Form并不影响页面布局的（牺牲一点代码的可读性，有点代码小洁癖......）
</td>
<td>
 
</td>
</tr>
</table>
<hr />
<form id="form3" name="form3">
<span>English</span>
<input id="txtEnglish" name="txtEnglish" type="text" />
</form>
<hr />
<form id="form4" name="form3">
<span>Chinese</span>
<input id="txtChinese" name="txtChinese" type="text" />
</form>
<hr />
<ul>
<form id="form5" name="form5">
<li>
<label>
int：
</label>
<input name="txtInt" id="txtInt" type="text" size="20" value="">
<span class="error"></span></li>
<li>
<label>
isFloat：
</label>
<input name="txtFloat" id="txtFloat" type="text" size="20" value="">
<span class="error"></span></li>
</form>
<li class="index-pos">
<form id="form6" name="form6">
<label>
CardNo：
</label>
<input name="txtCardNo" id="txtCardNo" type="text" size="20" value="">
<span class="error"></span>
</form>
</li>
</ul>
<hr />
<input id="btnEmail" type="button" value="Email" />
<input id="btnPhone" type="button" value="Phone" />
<input id="btnEnglish" type="button" value="English" />
<hr />
<input id="btnChinese" type="button" value="btnChineseAndEmail" />
<input id="btnInt" type="button" value="btnInt" />
<hr />

展示图：

</body>

</html>

0 0