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

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

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

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

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>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td>
                这里的Form并不影响页面布局的（牺牲一点代码的可读性，有点代码小洁癖......）
            </td>
            <td>
                &nbsp;
            </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 多按钮，多表单，分组验证的更多相关文章

  1. jQuery实现button按钮提交表单

    在JSP页面中,通常使用button按钮提交表单数据,使用jQuery实现代码如下: <span style="font-family:Comic Sans MS;font-size: ...

  2. JQuery脚本-通过禁用按钮防止表单重复提交

    <script type="text/javascript"> /* jquer 脚本,避免重复提交 隐藏点击的submit,后在他之后插入同名button伪装成被隐藏 ...

  3. aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)

    这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲     上面是效果,下面来说使用步骤 jQuery.Valid ...

  4. jquery 通过submit()方法 提交表单示例

    jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...

  5. 使用jQuery，实现完美的表单异步提交

    jQuery异步提交表单 <form id="form1" method="post"> <table border="1" ...

  6. jquery来跨域提交表单

    说说用jquery来实现跨域提交表单 在jQuery中,我们使用json数据类型,通过getJSON方法来实现从服务端获取或发送数据,而当要向不同远程服务器端提交或者获取数据时,要采用jsonp数据类 ...

  7. 使用jQuery实现跨域提交表单数据

    我们在WEB开发中有时会遇到这种情况,比如要从A网站收集用户信息,提交给B网站处理,这个时候就会涉及到跨域提交数据的问题.本文将给您介绍如何使用jQuery来实现异步跨域提交表单数据.   在jQue ...

  8. jQuery事件篇---过滤选择器 & 表单选择器

    内容提纲: 过滤选择器 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 表单选择器 6.常规选择器 7.表单选择器 8.表单过滤器 发文不易,转载请注明出处! 过滤选 ...

  9. jQuery Label Better – 友好的表单输入框提示插件

    jQuery Label Better 帮助你标记您的表单输入域,带有美丽的动画效果而且不占用空间.这个插件的独特之处在于所有你需要做的就是添加一个占位符文本,只有当用户需要它的时候才显示标签. 您可 ...

  10. jQuery form插件的使用--用 formData 参数校验表单，验证后提交（简单验证）.

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src=& ...

随机推荐

  1. Dennis与Ken爷爷的UNIX/C世界

     沉寂了很久了,时间在不断地逝去,转眼又到了新的一年,2013的发生了太多,Beta版本.辞职.职位转换.ARM.Driver.初级厨艺.Dx11.GPU.CPU.登山.GNU/Linux.Cross ...

  2. WCF中因序列化问题引起的异常和错误。

    尝试对参数 http://tempuri.org/ 进行序列化时出错: parameters.InnerException 消息是“不应为数据协定名称为“DBNull:http://schemas.d ...

  3. DataContractSerializer序列化与反序列化遇到的奇怪问题

    private static void Serialize1(string filename, object obj)         {             var stream = new F ...

  4. Redis PHP通用类

    找到一个比较全的Redis PHP操作类库,分享给大家 <?php /**  * redis操作类  * 说明,任何为false的串,存在redis中都是空串.  * 只有在key不存在时,才会 ...

  5. [转]Handy adb commands for Android

    转自:http://www.growingwiththeweb.com/2014/01/handy-adb-commands-for-android.html View connected devic ...

  6. linux 环境变量设置及查看

    1. 显示环境变量HOME $ echo $HOME /home/redbooks 2. 设置一个新的环境变量hello $ export HELLO="Hello!" $ ech ...

  7. CentOS6部署VNC服务端

    VNC (Virtual Network Computer)是虚拟网络计算机的缩写.VNC 是在基于 UNIX 和 Linux 操作系统的免费的开源软件,远程控制能力强大,高效实用,其性能可以和 Wi ...

  8. 菜鸟学Windows Phone 8开发(3)——布局和事件基础

    本系列文章来源MSDN的 面向完全新手的 Windows Phone 8 开发  本文地址:http://channel9.msdn.com/Series/Windows-Phone-8-Develo ...

  9. DDD：谈谈数据模型、领域模型、视图模型和命令模型

    背景 一个类型可以充当多个角色,这个角色可以是显式的(实现了某个接口或基类),也可以是隐式的(承担的具体职责和上下文决定),本文就讨论四个角色:数据模型.领域模型.视图模型和命令模型. 四个角色 数据 ...

  10. Hadoop入门进阶课程1--Hadoop1.X伪分布式安装

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博主为石山园,博客地址为 http://www.cnblogs.com/shishanyuan  ...