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

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

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

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

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. GitLab 的 Developer 角色没有权限提交问题

    "C:\Program Files\Git\bin\git.exe" push --recurse-submodules=check --progress "origin ...

  2. 使用vim 查看二进制文件

    Vim 可以用来查看和编辑二进制文件 vim -b egenea-base.ko 加上-b参数,以二进制打开 然后输入命令 :%!xxd -g 1 切换到十六进制模式显示

  3. 在 远程桌面 权限不足无法控制 UAC 提示时，可使用 计划任务 绕开系统的 UAC 提示

    就是记录一下,在远程的时候,很可能远程软件没有以管理员身份运行,或者其它原因,操作会被系统阻止,UAC 会进行提示,但是远程软件目前是无法操作的.(以下方法在 Windows 7 中测试通过) 可以通 ...

  4. [AX2012]发送广播邮件

    AX 2012可以使用MAPI或者SMTP发送邮件,MAPI是客户端方法,需要outlook的协作,而SMTP则是服务器端方法,要求SMTP允许AOS服务器通过它中继.这里要讲的就是如何通过SMTP发 ...

  5. 用户控件的设计要点 System.Windows.Forms.UserControl

    用户控件的设计要点 最近的项目中有一个瀑布图(彩图)的功能,就是把空间和时间上的点量值以图的形式呈现出来,如下图: X坐标为空间,水平方向的一个像素代表一个空间单位(例如50米) Y坐标为时间,垂直方 ...

  6. EventBus使用介绍

    EventBus是Android下高效的发布/订阅事件总线机制.作用是可以代替传统的Intent,Handler,Broadcast或接口函数在Fragment,Activity,Service,线程 ...

  7. Android之layout_alignBottom失效问题

    外面是一层RelativeLayout,前面的text和后面按钮都是设置centerParent_vertical,第二个hello是需要与第一个底部对齐,虽然设置alginBottom指向第一个he ...

  8. 译：C#面向对象的基本概念 (Basic C# OOP Concept) 第二部分（封装，抽象，继承）

    6.封装 封装就是对外部类隐藏成员或变量.我已经说过房子的保安仅仅被限制在房子的入口处,不需要知道屋内发生了什么.房主对保安隐藏了屋内所发生的任何事,以便更安全.隐藏和限制就被称为封装. 例如我们有两 ...

  9. (oracle/mysql)启停,导入导出,DB字符集

    ==================================================================================== DB启动停止 ======== ...

  10. efwplus框架介绍

    此框架得到博客园大神@张善友的关注,建议我写一篇此框架的最新介绍,好在@dotNet跨平台公众号上推荐给大家,得到大神的指示当然激动,马不停蹄的赶出此文,供大家参考!   一.使用efwplus框架的 ...