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

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

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

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

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. redhat下mysql安装与使用

    1.安装 (1)查看是否安装 yum list installed mysql* (2)查看现有安装包 yum list mysql* (3)安装mysql服务器端 yum install mysql ...

  2. 树莓派保卫战--防止SSH暴力破解

    自己用树莓派搭建了个小server,用了很长时间了,最近查看log发现有很多SSH登陆失败,瞬间心就碎了,一直没关心小派的安全问题,怪我咯! 马上行动,首先研究下log:/var/log/auth.l ...

  3. Visual Studio 2015 开发大量 JavaScript 代码项目程序崩溃的解决方案

    最近公司做新项目,基于 Bootstrap.AngularJS 和 kendo 开发一套后台的管理系统,在项目中使用了大量的 JavaScript 文件,这两天 Visual Studio 2015 ...

  4. String to Date 多种格式转换

    在做Excel数据导入的时候,有些日期文本转换为日期格式时,需要适应多种格式,转换代码如下: static Date multiParse(String strDate){ if (strDate?. ...

  5. [转]使用Cadence ADE + Spectre做Montel Carlo仿真

    1. 工艺模型的选择.以TSMC 180nm工艺为例,1.8V Normal devices 有TT,SS,FF,SF,FS共5种工艺Corner及Montel Carlo(MC)共6种可选用工艺角. ...

  6. 用gameMaker做个小游戏

    看下面这个课程链接,半小时学会 http://study.163.com/course/courseMain.htm?courseId=352004#/courseMain 这是我做的:http:// ...

  7. 尝鲜CodeBlocks

    在寻找跨平台的C++ IDE,就尝试了CodeBlocks,写了个HelloWorld,测试了一下C++11的代码,我很喜欢他的代码着色,看着很清爽. 记得要打开C++11的支持:

  8. Win7下安装git

    1.下载并安装git for windows版本:msysgit http://msysgit.github.com/   成功安装后,即可使用了,右键一个目录后可以看到菜单选项: 选择Git Gui ...

  9. c++ 相关的技术资源整理归类

    最近一段时间 c++ 社区里最火热的话题莫过于 cppcon2015 了, isocpp 上一堆相关的新闻,其中有一个页面罗列了该会议的全部主题, 匆匆一瞥几乎眼花缭乱,为期一个星期的会议竟有上百个演 ...

  10. SQL数据类型解释

    SQL数据类型解释 1.char.varchar.text.ntext.bigint.int.smallint.tinyint和bit的区别及数据库的数据类型电脑秘籍 2009-05-15 21:47 ...