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

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

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

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

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

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 >
<div>
<span>Email</span>
<input />
</div>
</form>
<hr />
<table class="style1">
<tr>
<td>
<form >
<span>Phone</span>
<input />
</form>
</td>
<td>
 
</td>
</tr>
<tr>
<td>
这里的Form并不影响页面布局的（牺牲一点代码的可读性，有点代码小洁癖......）
</td>
<td>
 
</td>
</tr>
</table>
<hr />
<form >
<span>English</span>
<input />
</form>
<hr />
<form >
<span>Chinese</span>
<input />
</form>
<hr />
<ul>
<form >
<li>
<label>
int：
</label>
<input name="txtInt" >
<span class="error"></span></li>
<li>
<label>
isFloat：
</label>
<input name="txtFloat" >
<span class="error"></span></li>
</form>
<li class="index-pos">
<form >
<label>
CardNo：
</label>
<input name="txtCardNo" >
<span class="error"></span>
</form>
</li>
</ul>
<hr />
<input />
<input />
<input />
<hr />
<input />
<input />
<hr />

</body>

</html>