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

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

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

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

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. word2007无法执行语言识别

    步驟1:取消“啟用自動語言檢測”在“審閱”選項卡上的“校對”組中,單擊“設置語言”(一個圖標,看起來類似於前麵帶有複選標記的地球).取消“自動檢測語言”複選框.步驟2:取消“鍵入入時檢查拚寫”到Wor ...

  2. css 单位转换

    如今 css 的单位越来越多了,px, em, rem, 微信的小程序又出来个 rpx 可以用 less 自动生成需要的单位 但当你只是想把一个已有的页面转换成小程序时,可能更需要一个 px -> ...

  3. iOS 内存管理机制和循环引用处理方法

    简述 ARC: 自动引用计数, Automatic Reference Counting MRC: Mannul Reference Counting ARC工作原理 1.当每次创建一个新实例时,AR ...

  4. [转载]寻找两个有序数组中的第K个数或者中位数

    http://blog.csdn.net/realxie/article/details/8078043 假设有长度分为为M和N的两个升序数组A和B,在A和B两个数组中查找第K大的数,即将A和B按升序 ...

  5. android一键分享功能不使用任何第三方sdk

    在android中有自带的一键分享功能,不过它会把所有带分享的应用都找出来,如果我们只需要一些常见的分享应用,该如何做呢? 下面看我的效果图(横屏和竖屏自动适配): 接下来看我的调用(支持图片和文字分 ...

  6. 网上收集的以及自己总结的iOS开发技巧

    Objective-C 1.让Xcode的控制台支持LLDB类型的打印 这有什么用? 怎么说尼,笔者认为这个还是比较有用滴,为什么有用尼? 因为在Xcode断点调试的时候, 在控制台输入 po sel ...

  7. java之抽象类

    1.用abstract关键字来修饰一个类时,这个类叫做抽象类:用abstract来修饰一个方法时,该方法叫做抽象方法. 2.含有抽象方法的类必须被声明抽象类,抽象类必须被继承,抽象方法必须被重写. 3 ...

  8. ZOJ 2753 Min Cut (Destroy Trade Net)（无向图全局最小割）

    题目大意 给一个无向图,包含 N 个点和 M 条边,问最少删掉多少条边使得图分为不连通的两个部分,图中有重边 数据范围:2<=N<=500, 0<=M<=N*(N-1)/2 做 ...

  9. c/c++:重载 覆盖 隐藏 overload override overwrite

    http://www.cnblogs.com/qlee/archive/2011/07/04/2097055.html 成员函数的重载.覆盖与隐藏成员函数的重载.覆盖(override)与隐藏很容易混 ...

  10. php生成随机密码(php自定义函数)转自先锋教程网

    php生成随机密码(php自定义函数) 时间:2015-12-16 20:43:49来源:网络 导读:php随机密码的生成代码,使用php自定义函数生成指定长度的随机密码,密码规则为小写字母与数字的随 ...