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

首先要熟悉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. 关于dyld: Library not loaded

    在接入智凡迪的sdk过程中,遇到以下问题: dyld: Library not loaded: @rpath/SDKFramework.framework/SDKFramework   Referen ...

  2. sudo 运行 npm或node时，出现找不到命令

    sudo 运行 npm或node时,出现找不到命令的情况,运行下面这些命令, sudo ln -s /usr/local/bin/node /usr/bin/node sudo ln -s /usr/ ...

  3. Docker学习（三）docker容器操作

    上一篇:Docker学习(二)docker镜像操作 容器是基于镜像创建的,说白了把一个镜像运行起来就是容器 查看容器 docker ps 上面什么也没有,因为我们没有正在运行的容器,下面我门启动一个容 ...

  4. 使用 ExceptionDispatchInfo 捕捉并重新抛出异常

    当你跑起了一个异步线程,并用 await 异步等待时,有没有好奇为什么能够在主线程 catch 到异步线程的异常? 当你希望在代码中提前收集好异常,最后一并把收集到的异常抛出的时候,能不能做到就像在原 ...

  5. 【angularJS】启动（bootstrap）机制

    Angular的启动分为手动和自动两种. 自动启动 定义模块的例子中,采用的就是自动的方式:通过内置的指令ngApp 来指定启动时加载的模块.<html ng-app="myApp&q ...

  6. [BZOJ5073][Lydsy1710月赛]小A的咒语

    bzoj description 你有一个\(A\)串和\(B\)串,你需要判断是否可以在\(A\)串中拆出\(x\)个互不相交的子串,使它们按顺序拼在一起可以组成\(B\)串. \(|A|,|B|\ ...

  7. Ecel 粘贴图片并调整大小,移到底层

    Sub Click() ActiveSheet.Pictures.Paste.Select Selection.ShapeRange.ScaleWidth 1.4, msoTrueSelection. ...

  8. spring--集合注入(常规方法)

    数据,list,set,map,Properties 集合注入 package Spring_collections; /** * Created by luozhitao on 2017/8/11. ...

  9. osquery简单试用

    备注: osquery  facebook 开源的将操作系统指标转换为sql 查询,方便好用,很适合devops 性能分析,系统监控 1. 安装 参考 https://osquery.io/downl ...

  10. CentOS yum源设定使用方法的整理(转)

    CentOS yum更新了很多版本更新,我本人认为CentOS yum很好使的文件系统,在此向大家推荐CentOS应该是做为服务器的linux的佼佼者.CentOS采用的二进制包是rpm,不过包的依赖 ...