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

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

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

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

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. D3 & Data Visualization in Ext JS

    通过适配器可以在ExtJs中轻松的集成D3的展示能力 http://video.sencha.com/watch/zvUjnFJ91xVvuwdTh2zjqP?mkt_tok=eyJpIjoiWm1a ...

  2. android 性能分析、优化

    .主要介绍了一些分析工具,比如GT.ITest等http://www.jianshu.com/p/8b77d394b2a6 .详细介绍啦android平台常见性能优化工具http://blog.csd ...

  3. Jconsole加载Jtop插件

    Jconsole加载Jtop插件http://automationqa.com/forum.php?mod=viewthread&tid=3719&fromuid=2

  4. server 2012 IIS 启用.NET 4.5

    server2012 自带.NET 4.5 不过IIS服务器只有2.0 和 4.0 所以我们需要手动配置 1.服务器-添加角色和功能 2.依次下一步,选择到服务器角色 -点开web服务器(IIS)-应 ...

  5. POJ 2234 Matches Game

    Matches Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7567   Accepted: 4327 Desc ...

  6. POJ 1631 Bridging signals

    Bridging signals Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 9441   Accepted: 5166 ...

  7. .NET面试必备（整理）

    1.简述 private. protected. public. internal 修饰符的访问权限. private : 私有成员, 在类的内部才可以访问.public : 公共成员,完全公开,没有 ...

  8. KIS旗舰版常用数据表

    select * from IC_Web2ERPOrders  --网上订单  FOrderStatus 14--已发货,6--待发货,2--待配货,1--未审核 (审核后变为2,进入待配货)sele ...

  9. CyanogenMod wiki reading tips | Android tips

    To Enable the Developer and Performance settings on CyanogenMod 10.1 In the Settings app, choose the ...

  10. 字体文件放入CDN服务器中，跨域问题（IIS版）

    Font from origin 'http:/XXXX' has been blocked from loading by Cross-Origin Resource Sharing policy: ...