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=& ...
随机推荐
- Visual Studio 压力测试注意点
常用的三个测试:单元测试.web性能分析.压力测试:前两个好说,压力测试的时候如果配置不注意,往往不成功. 默认压力测试的测试结果存储在微软云端的,(visual studio online),国内一 ...
- 苹果 Mac OS 下查看系统隐藏文件
Mac OS X中有很多系统隐藏的信息文件, 一般在Finder中都是看不到,也修改不了的. 但通过在"终端"中输入命令, 就可以在Finder中显示出来: defaults wr ...
- Java对象创建阶段的代码调用顺序
在创建阶段系统通过下面的几个步骤来完成对象的创建过程 为对象分配存储空间 开始构造对象 从超类到子类对static成员进行初始化 超类成员变量按顺序初始化,递归调用超类的构造方法 子类成员变量按顺序初 ...
- 【Cocos2d-Js基础教学 入门目录】
本教程视地址频在: 九秒课堂 完全免费 从接触Cocos2dx-Js以来,它的绽放的绚丽让我无法不对它喜欢.我觉得Js在不断带给我们惊喜:在开发过程中,会大大提升我们对原型开发的利用率,使用Js语言做 ...
- sql 查询 – left join on
1. 问题引入 主要是为了查询在一个表中出现,而不在另一个表中出现的数据,具体来说: 如下图所示, 有A.B两个表,其中B表的Aid字段参照A表的主键id,为了查询在A表中出现,却没有被B表引 ...
- ASP.NET MVC 自定义路由中几个需要注意的小细节
本文主要记录在ASP.NET MVC自定义路由时,一个需要注意的参数设置小细节. 举例来说,就是在访问 http://localhost/Home/About/arg1/arg2/arg3 这样的自定 ...
- Spring 开启Annotation <context:annotation-config> 和 <context:component-scan>诠释及区别
<context:annotation-config> 和 <context:component-scan>的区别 <context:annotation-config& ...
- Eclipse中集成Tomcat
问题: 很多时候在Eclipse中启动Tmocat后,不能访问本机的localhost:8080主页,并且其他项目也不能访问. 原因: 打开Tomcat下的webapp后也找补到项目目录,这是因为Ec ...
- sql server命令行
http://www.cnblogs.com/bingcaihuang/archive/2011/01/31/1948222.html http://www.cnblogs.com/wontonJ/a ...
- aiku给你们最真心地学习建议--转
aiku给你们最真心地学习建议: 以前我最开始的就搞驱动,后来发现要熟悉hal层,接着就硬着看hal代码,第一次看,很剧痛,慢慢的,看习惯了,就好了,后来发现,搞驱动的人,不懂hal,很多时候就定位 ...