进行开发的时候，遇到了需要有多个规则来校验，如新用户过来一套校验规则，老用户过来又是一套规则，这时候就要需要定义多套校验规则。

首先要熟悉Bootstrap和Jquery validate的使用，详情请参考Bootstrap 与 Jquery validate 结合使用——简单实现

然后开始进入正题。

基本的东西不变，只需要给form表单绑定不同的规则，自己定义几套规则即可。

（本人亲自尝试了多种方法，发现Jquery validate的校验规则只能在$(function(){})即网页加载完毕后才能绑定校验规则，不能动态的去更改绑定。即通过一个触发事件重新绑定新的校验规则）

给每个form表单绑定校验规则，根据业务显示对应的form表单即可

/* 表单数据校验 start */

    //设置默认值

    $.validator.setDefaults({

        errorElement : 'span',

        errorClass : 'help-block',

        debug: false, //调试模式取消submit的默认提交功能

        focusInvalid: false, //当为false时，验证无效时，没有焦点响应

        submitHandler: function(form){//表单提交句柄,为一回调函数，带一个参数：form

            var datas = stitchParameter();

            if(paycount == 90){

                $(form).ajaxSubmit({

                    type : "POST",

                    dataType : "json",

                    async : false,

                    data : {"encrypt" : SecUtil.encrypt(datas,_keyPair)},

                    url : HOSTPATH+"/pay/unionPay",

                    success:function( jsondata ){

                        if( jsondata.meta.code == 'S002' ){

                            //数据处理

                            $(".tab-pane").removeClass("in").removeClass("active");

                            $("#pay-successful").addClass("in").addClass("active");

                        }else{

                            alert(jsondata.meta.message);

                            //数据处理

                            $(".tab-pane").removeClass("in").removeClass("active");

                            $("#pay-failure").addClass("in").addClass("active");

                        }

                    }

                });

                //开始计时

                var paytimer = setInterval(function(){

                    paycount--;

                    if(paycount == 0){

                        clearInterval(paytimer);

                        paycount = 90;

                    }else{

                        if(payflag==1){

                            clearInterval(paytimer);

                        }

                    }

                },1000);

            }else{

            }

        },   

          //自定义错误消息放到哪里

        errorPlacement : function(error, element) {

            //区分普通输入框和输入框组，如果直接用element.next().remove();会错误删除标签（即输入框组的<span class="input-group-addon"></span>）

            element.nextUntil(".input-group-addon").remove();

            //element.next().remove();//删除显示图标

            element.after('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');

            element.closest('.form-group').append(error);//显示错误消息提示

        },

        //给未通过验证的元素进行处理

        highlight : function(element) {

            $(element).closest('.form-group').addClass('has-error has-feedback');

        },

        //验证通过的处理

        success : function(label) {

            var el=label.closest('.form-group').find("input");

              //区分普通输入框和输入框组，如果直接用el.next().remove();会错误删除标签（即输入框组的<span class="input-group-addon"></span>）

            el.nextUntil(".input-group-addon").remove();

            //el.next().remove();//删除显示图标

            el.after('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');

            label.closest('.form-group').removeClass('has-error').addClass("has-feedback has-success");

            label.remove();

        },

    });

    //新数据校验规则

    var newRules={

        rules:{

            new_name:{

                required : true,

                minlength : 2

            },

            new_idCard:{

                required : true,

                isIdCardNo : true

            },

            new_phone:{

                required : true,

                mobile : true

            },

            new_cardNo:{

                required : true,

                FixedLength : 16

            },

            new_cvn:{

                required : true,

                FixedLength : 3,

            },

            new_verifyCode:{

                required : true,

                FixedLength : 4,

                checkVerifyCode : true

            },

            new_expDate:{

                required:true,

                date : true

            }

        },

        messages:{

            new_name:{

                required : "请输入姓名",

                minlength : "请输入正确的姓名"

            },

            new_idCard:{

                required : "请输入身份证号"

            },

            new_phone:{

                required : "请输入手机号码"

            },

            new_cardNo:{

                required :"请输入银行信用卡",

                FixedLength : "请输入正确的银行信用卡"

            },

            new_cvn:{

                required : "请输入CVN",

                FixedLength : "请输入3位的CVN"

            },

            new_verifyCode:{

                required : "请输入验证码",

                FixedLength : "请输入有效的验证码",

            },

            new_expDate:{

                required : "请输入有效日期"

            }

        },

    };

    //旧数据校验规则

    var oldRules={

        rules:{

            old_cvn:{

                required : true,

                FixedLength : 3,

            },

            old_verifyCode:{

                required : true,

                FixedLength : 4,

                checkVerifyCode : true

            }

        },

        messages:{

            old_cvn:{

                required : "请输入CVN",

                FixedLength : "请输入3位的CVN"

            },

            old_verifyCode:{

                required : "请输入验证码",

                FixedLength : "请输入有效的验证码",

            }

        },

    };

    //生成校验规则

    var validate_new = jQuery.extend({}, $.validator.defaults, newRules);

    var validate_old = jQuery.extend({}, $.validator.defaults, oldRules);

    //表单绑定校验#userPay-old

    $("#userPay-new").validate(validate_new);

    $("#userPay-old").validate(validate_old);

    /* 表单数据校验 end */

对应的页面文件

<!-- 新数据表单 -->

<form id="userPay-new">

    <table>

        <tr>

            <td>

                <div class="form-group">

                    <label for="dtp_input3" class="label-title control-label">姓名：</label>

                    <div class="input-group input-div">

                        <input id="new_name" name="new_name" class="form-control readonly-input" size="16" type="text" value="">

                    </div>

                </div>

            </td>

            <td class="float-td">

                <div class="form-group">

                    <label for="dtp_input3" class="label-title control-label">身份证：</label>

                    <div class="input-group input-div">

                        <input id="new_idCard" name="new_idCard" class="form-control readonly-input" size="16" type="text" value="">

                    </div>

                </div>

            </td>

        </tr>

        <tr>

            <td>

                <div class="form-group">

                    <label for="dtp_input3" class="label-title control-label">手机：</label>

                    <div class="input-group input-div">

                        <input id="new_phone" name="new_phone" class="form-control readonly-input" size="16" type="text" value="">

                    </div>

                </div>

            </td>

        </tr>

        <tr>

            <td>

                <div class="form-group bank-card-div">

                    <label for="dtp_input3" class="label-title control-label">银行卡：</label>

                    <div class="input-group date input-div">

                        <span class="caret"></span>

                        <input id="new_cardNo" name="new_cardNo" class="form-control dropdown-toggle" data-toggle="dropdown" size="16" type="text" value=""/>

                        <!-- <span class="input-group-addon" data-toggle="dropdown">

                            <span class="glyphicon     glyphicon glyphicon-arrow-down"></span>

                        </span> -->

                         <span class="input-group-addon addCard">

                            <span class="glyphicon glyphicon glyphicon-plus"></span>

                        </span>

                        <ul class="userCards dropdown-menu">

                            <!-- <li role="presentation"><span>信用卡（7757）</span><a href="#">删除</a></li>

                            <li role="presentation" class="divider"></li>

                            <li role="presentation"><span onclick="javascript: selectCard(this);">信用卡（7757）</span><a href="#" onclick= "return ">删除</a></li>

                            <li role="presentation" class="divider"></li>

                            <li role="presentation"><span onclick="javascript: selectCard(this);">信用卡（7757）</span><a href="#" onclick= "return ">删除</a></li>

                            <li role="presentation" class="divider"></li>

                            <li role="presentation"><span onclick="javascript: selectCard(this);">信用卡（7757）</span><a href="#" onclick= "return ">删除</a></li> -->

                        </ul>

                    </div>

                </div>

            </td>

            <td class="float-td">

                <div class="form-group">

                    <label for="dtp_input3" class="label-title control-label">CVN：</label>

                    <div class="input-group input-div">

                        <input id="new_cvn" name="new_cvn" class="form-control" size="3" type="text" value="">

                    </div>

                </div>

            </td>

        </tr>

        <tr>

            <td>

                <div class="form-group verify-code-div">

                    <label for="dtp_input3" class="label-title control-label">验证码：</label>

                    <div class="input-group input-div">

                        <input id="new_verifyCode" name="new_verifyCode" class="form-control" data-toggle="dropdown" size="16" type="text" value="">

                        <span class="input-group-addon verify-code-span"><a class="btn btn-primary verify-code-a">获取验证码</a></span>

                    </div>

                </div>

            </td>

            <td class="float-td">

                <div class="form-group exp-date-div">

                    <label for="dtp_input2" class="label-title control-label">有效期：</label>

                    <div class="datepicker input-group date form_date input-div">

                        <input id="new_expDate" name="new_expDate" class="form-control" data-toggle="dropdown" size="16" type="text" value="" readonly>

                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>

                    </div>

                </div>

            </td>

        </tr>

    </table>

    <input id="submit-btn-inner" class="btn btn-primary submit-button" data-loading-text="正在提交" type="submit" value="确认支付"/>

</form>

<!-- 旧数据表单 -->

<form id="userPay-old" style="display: none;">

    <table>

        <tr>

            <td>

                <div class="form-group">

                    <label for="dtp_input3" class="label-title control-label">姓名：</label>

                    <div class="input-group input-div">

                        <input id="old_name" name="old_name" class="form-control readonly-input" size="16" type="text" value="">

                    </div>

                </div>

            </td>

            <td class="float-td">

                <div class="form-group">

                    <label for="dtp_input3" class="label-title control-label">身份证：</label>

                    <div class="input-group input-div">

                        <input id="old_idCard" name="old_idCard" class="form-control readonly-input" size="16" type="text" value="">

                    </div>

                </div>

            </td>

        </tr>

        <tr>

            <td>

                <div class="form-group">

                    <label for="dtp_input3" class="label-title control-label">手机：</label>

                    <div class="input-group input-div">

                        <input id="old_phone" name="old_phone" class="form-control readonly-input" size="16" type="text" value="">

                    </div>

                </div>

            </td>

        </tr>

        <tr>

            <td>

                <div class="form-group bank-card-div">

                    <label for="dtp_input3" class="label-title control-label">银行卡：</label>

                    <div class="input-group date input-div">

                        <span class="caret"></span>

                        <input id="old_cardNo" name="old_cardNo" class="form-control dropdown-toggle readonly-input" data-toggle="dropdown" size="16" type="text" value="" readonly/>

                       <!--  <span class="input-group-addon" data-toggle="dropdown">

                            <span class="glyphicon     glyphicon glyphicon-arrow-down"></span>

                        </span> -->

                         <span class="input-group-addon addCard">

                            <span class="glyphicon glyphicon glyphicon-plus"></span>

                        </span>

                        <ul class="userCards dropdown-menu" aria-labelledby="old_cardNo">

                            <!-- <li role="presentation"><span>信用卡（7757）</span><a href="#">删除</a></li>

                            <li role="presentation" class="divider"></li>

                            <li role="presentation"><span onclick="javascript: selectCard(this);">信用卡（7757）</span><a href="#" onclick= "return ">删除</a></li>

                            <li role="presentation" class="divider"></li>

                            <li role="presentation"><span onclick="javascript: selectCard(this);">信用卡（7757）</span><a href="#" onclick= "return ">删除</a></li>

                            <li role="presentation" class="divider"></li>

                            <li role="presentation"><span onclick="javascript: selectCard(this);">信用卡（7757）</span><a href="#" onclick= "return ">删除</a></li> -->

                        </ul>

                    </div>

                </div>

            </td>

            <td class="float-td">

                <div class="form-group">

                    <label for="dtp_input3" class="label-title control-label">CVN：</label>

                    <div class="input-group input-div">

                        <input id="old_cvn" name="old_cvn" class="form-control" size="3" type="text" value="">

                    </div>

                </div>

            </td>

        </tr>

        <tr>

            <td>

                <div class="form-group verify-code-div">

                    <label for="dtp_input3" class="label-title control-label">验证码：</label>

                    <div class="input-group input-div">

                        <input id="old_verifyCode" name="old_verifyCode" class="form-control" data-toggle="dropdown" size="16" type="text" value="">

                        <span class="input-group-addon verify-code-span"><a class="btn btn-primary verify-code-a">获取验证码</a></span>

                    </div>

                </div>

            </td>

            <td class="float-td">

                <div class="form-group exp-date-div">

                    <label for="dtp_input2" class="label-title control-label">有效期：</label>

                    <div class="datepicker input-group date form_date input-div">

                        <input id="old_expDate" name="old_expDate" class="form-control readonly-input" data-toggle="dropdown" size="16" type="text" value="" >

                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>

                    </div>

                </div>

            </td>

        </tr>

    </table>

    <input id="submit-btn-inner" class="btn btn-primary submit-button" data-loading-text="正在提交" type="submit" value="确认支付"/>

</form>

结果可行。

如有更加好的方法，请留言。本来小菜一枚，如有不足之处，请多多指教！

Bootstrap 与 Jquery validate 结合使用——多个规则实现的更多相关文章

  1. Bootstrap 与 Jquery validate 结合使用——简单实现

    首先必须引入的JS和CSS <script type="text/javascript" src="${ctx}/static/js/jquery-1.9.1.mi ...

  2. jquery validate 动态增加删除验证规则（转载）

    页面加载完成初始化form validate $("#user_regForm").validate({ errorPlacement: function(error, eleme ...

  3. jquery validate 动态增加删除验证规则

    增加规则示例: $('.class').rules('add',{ required: true, messages:{ required: '这是必填,请填写', } }); 删除规则示例: $(' ...

  4. 验证jquery.validate.js

    <pre>jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 <a href="ht ...

  5. jquery.validate.js使用之自定义表单验证规则

    jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...

  6. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

  7. jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示

    类似的文章园子里已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此.最终效果如下: 后端使用Asp.net mvc5,前端框架有:jquery.validate.jq ...

  8. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  9. bootstrap+jQuery.validate

    bootstrap+jQuery.validate表单校验   谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.Us ...

随机推荐

  1. SPOJ Favorite Dice（数学期望）

    BuggyD loves to carry his favorite die around. Perhaps you wonder why it's his favorite? Well, his d ...

  2. stm32寄存器版学习笔记07 ADC

    STM32F103RCT有3个ADC,12位主逼近型模拟数字转换器,有18个通道,可测量16个外部和2个内部信号源.各通道的A/D转换可以单次.连续.扫描或间断模式执行. 1.通道选择 stm32把A ...

  3. <context:annotation-config/>,<context:component-scan/>,<mvc:annotation-driven/>区分

    链接:http://blog.csdn.net/baple/article/details/16864175 链接:http://blog.csdn.net/Baple/article/details ...

  4. java web构建学习（概念基础）

    1.什么是Java Web Application 一个Java web应用程序生成交互式web页面包含各种类型的标记语言(HTML.XML等)和动态内容.它通常由web组件例如JavaServer ...

  5. Luogu P2742 模板-二维凸包

    Luogu P2742 模板-二维凸包 之前写的实在是太蠢了.于是重新写了一个. 用 \(Graham\) 算法求凸包. 注意两个向量 \(a\times b>0\) 的意义是 \(b\) 在 ...

  6. test20190305

    上午考试,是 \(SCOI\ 2016\ Day\ 1\) 的题目. 背单词 这题我以前是做过的.Trie树总结. #include<bits/stdc++.h> using namesp ...

  7. 字符串处理scanf("%d%*c",&n);

    "*"表示该输入项读入后不赋予任何变量,即跳过该输入值.这在减小内存开支上面还是有一点用处的,不需要的字符直接跳过,免得申请没用的变量空间 你的例子中的%*c的作用是读入'\n', ...

  8. 通过解读 WPF 触摸源码，分析 WPF 插拔设备触摸失效的问题（问题篇）

    在 .NET Framework 4.7 以前,WPF 程序的触摸处理是基于操作系统组件但又自成一套的,这其实也为其各种各样的触摸失效问题埋下了伏笔.再加上它出现得比较早,触摸失效问题也变得更加难以解 ...

  9. vw+vh+rem响应式布局

    科普下: 平时很少用的css单位: 1.长度单位: rem:相对长度单位.相对于根元素(即html元素)font-size计算值的倍数; vw:相对于视口的宽度.视口被均分为100单位的vw; vh: ...

  10. C#.NET抽象类和接口的区别?

    声明方法的存在而不去实现它的类被叫做抽象类(abstract class),它用于要创建一个体现某些基本行为的类,并为该类声明方法,但不能在该类中实现该类的情况.不能创建abstract 类的实例.然 ...