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

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

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

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

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>

Jquery Validation 多按钮，多表单，分组验证的更多相关文章

jQuery实现button按钮提交表单
在JSP页面中,通常使用button按钮提交表单数据,使用jQuery实现代码如下: <span style="font-family:Comic Sans MS;font-size: ...
JQuery脚本-通过禁用按钮防止表单重复提交
<script type="text/javascript"> /* jquer 脚本,避免重复提交隐藏点击的submit,后在他之后插入同名button伪装成被隐藏 ...
aspx中的表单验证 jquery.validate.js 的使用以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)
这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲上面是效果,下面来说使用步骤 jQuery.Valid ...
jquery 通过submit()方法提交表单示例
jquery 通过submit()方法提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...
使用jQuery，实现完美的表单异步提交
jQuery异步提交表单 <form id="form1" method="post"> <table border="1" ...
jquery来跨域提交表单
说说用jquery来实现跨域提交表单在jQuery中,我们使用json数据类型,通过getJSON方法来实现从服务端获取或发送数据,而当要向不同远程服务器端提交或者获取数据时,要采用jsonp数据类 ...
使用jQuery实现跨域提交表单数据
我们在WEB开发中有时会遇到这种情况,比如要从A网站收集用户信息,提交给B网站处理,这个时候就会涉及到跨域提交数据的问题.本文将给您介绍如何使用jQuery来实现异步跨域提交表单数据. 在jQue ...
jQuery事件篇---过滤选择器 & 表单选择器
内容提纲: 过滤选择器 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法表单选择器 6.常规选择器 7.表单选择器 8.表单过滤器发文不易,转载请注明出处! 过滤选 ...
jQuery Label Better – 友好的表单输入框提示插件
jQuery Label Better 帮助你标记您的表单输入域,带有美丽的动画效果而且不占用空间.这个插件的独特之处在于所有你需要做的就是添加一个占位符文本,只有当用户需要它的时候才显示标签. 您可 ...
jQuery form插件的使用--用 formData 参数校验表单，验证后提交（简单验证）.
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src=& ...

随机推荐

Redrain个人维护并使用的DuiLib和UiLib库源代码下载地址
转载请说明原出处:http://blog.csdn.net/zhuhongshu/article/details/40740353,谢谢~~ 首先说明一下Duilib和Uilib的差别:UiLIb是D ...
POJ1226:Substrings(后缀数组)
Description You are given a number of case-sensitive strings of alphabetic characters, find the larg ...
ODAC （V9.5.15) 学习笔记（二十一）数据复制
用TVirtualTable在内存中缓存TOraQuery中的数据,主要应用场景是参照其他数据,需要将TOraQuery中的数据复制到TVirtualTable,由于没有类似于TClientDataS ...
查询修改linux 打开文件句柄数量
查询系统支持最大可打开文件句柄数量: #vi /proc/sys/fs/file-max 查询当前连接用户最大可打开文件句柄数量: #ulimit -a 修改当前连接用户最大可打开文件句柄数量: #u ...
POJ 1186 方程的解数
方程的解数 Time Limit: 15000MS Memory Limit: 128000K Total Submissions: 6188 Accepted: 2127 Case Time ...
JsonView Tool
转：C/C++内存管理详解堆栈
http://chenqx.github.io/2014/09/25/Cpp-Memory-Management/ 内存管理是C++最令人切齿痛恨的问题,也是C++最有争议的问题,C++高手从中获得了 ...
Flex Array 与 ArrayCollection.转自网络
1.array作为控件使用 FLEX3写法: <mx:Array id="barname"> <mx:String>Flash</mx:String& ...
ArcGIS地图打印设置
1.需求:客户自己开发的Engine程序,调用的是LayoutControl,需要连接大型绘图仪进行出图. 业务流程是先框选要打印的地图范围,该范围是自定义大小,框选完成之后进行预览,然后选择打印输出 ...
封装Js事件代理方法
// 封装事件代理 function delegateEvent(element, tag, event, listener) { // 判断是否支持addEventlistener if(eleme ...

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

展示图：

Jquery Validation 多按钮，多表单，分组验证的更多相关文章

随机推荐

热门专题