Jquery Validation 多按钮，多表单，分组验证
真正做到了 多按钮的验证。
在用户输入的时候就可以验证，而网上大部分多按钮验证都是必须要用户点击按钮后才可以验证。
研究了两天终于弄出来了，不知道两天是过长还是过段，现在分享给小伙伴们。
小伙伴们支持下啊，转载保留原本地址：
http://blog.csdn.net/xujunheng/article/details/39079595
<html>
<head>
<title></title>
<script src="js/lib/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/lib/jquery.form.js" type="text/javascript"></script>
<script src="js/dist/jquery.validate.js" type="text/javascript"></script>
<script src="js/dist/validate-methods.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$().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 />
<input id="btnCardNo" name="btnCardNo" type="submit" value="btnCardNo" />
展示图：
</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=& ...
随机推荐
- [转]Raspberry Pi做成路由器
http://raspjason.blog.51cto.com/8565009/1426561/ 曾经看到很多文章把Raspberry Pi制作成无线AP,但是我今天要做的是把Raspberry Pi ...
- SQL语句调优-基础知识准备
当确定了应用性能问题可以归结到某一个,或者几个耗时资源的语句后,对这些语句进行调优,就是数据库管理员或者数据库应用程序开发者当仁不让的职责了.语句调优是和数据库打交道的必备基本功之一. 当你面对一个“ ...
- Mesos源码分析
Mesos源码分析(1): Mesos的启动过程总论 Mesos源码分析(2): Mesos Master的启动之一 Mesos源码分析(3): Mesos Master的启动之二 Mesos源码分析 ...
- C# Json帮助类
using System; using System.Collections.Generic; using System.Web; using System.Text; using System.Re ...
- aiku给你们最真心地学习建议--转
aiku给你们最真心地学习建议: 以前我最开始的就搞驱动,后来发现要熟悉hal层,接着就硬着看hal代码,第一次看,很剧痛,慢慢的,看习惯了,就好了,后来发现,搞驱动的人,不懂hal,很多时候就定位 ...
- 国内的maven镜像
阿里云 <mirror> <id>alimaven</id> <name>aliyun maven</name> <url>ht ...
- DotNetBar RibbonControl控件office2007风格
在使用DotNetBar RibbonControl控件的时候如果想吧效果做成下图这种效果 把主窗体继承Office2007RibbonForm 然后要删除删除styleManager1 才会出现上图 ...
- Android下海康实时视频解码
折腾了一个多月,终于调出来了.....首先吐槽一下海康SDK,同时也感谢之... 手头有个项目,需要实时抓取海康摄像头,我是在Android下实现的,海康官网上没有Android SDK,这里友情提醒 ...
- wireshark解密本地https流量笔记
此方式支持firefox,chrome 建立path变量 SSLKEYLOGFILE=c:\ssl.key 重启firefox chrome,访问https网站会自动生成ssl session key ...
- HTTP 错误 500.19 - Internal Server Error(Windows Server 2012)
错误页面: 解决办法:重新添加角色和功能web服务器(IIS),选择应用程序开发下的相关.net4.5的选项