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

首先要熟悉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. manacher 算法 这个人确实写得太好了；

    O(n)回文子串(Manacher)算法 资料来源网络 参见:http://www.felix021.com/blog/read.php?2040 问题描述: 输入一个字符串,求出其中最大的回文子串. ...

  2. test20190305

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

  3. 使用poi进行excel导入并解析插入数据库

    前言 最近还得写excel的导入导出,结果还是得百度,虽然都能看懂,但是还是想记录下来这些东西 正文 1. 导入jar包 <dependency> <groupId>org.a ...

  4. (1/2) 为了理解 UWP 的启动流程，我从零开始创建了一个 UWP 程序

    每次使用 Visual Studio 的模板创建一个 UWP 程序,我们会在项目中发现大量的项目文件.配置.应用启动流程代码和界面代码.然而这些文件在 UWP 程序中到底是如何工作起来的? 我从零开始 ...

  5. 让 ScrollViewer 的滚动带上动画

    WPF 的 ScrollViewer 没有水平滚动和垂直滚动的属性 HorizontalScrollOffset VerticalScrollOffset,只有水平滚动和垂直滚动的方法 ScrollT ...

  6. lib包含# #pragma comment

    #pragma comment(lib,"d2d1.lib")#pragma comment(lib,"dwrite.lib")#pragma comment( ...

  7. 【DUBBO】Dubbo:monitor的配置

    [一]:配置项 <dubbo:monitor protocol="registry"/> [二]:配置解析器-->具体解析器为com.alibaba.dubbo. ...

  8. UVA11806 Cheerleaders

    题意 PDF 分析 如果要求是某行某列没有石子很好算,就一个组合数. 然后要求某行某列有,就用容斥原理就行了. 时间复杂度\(O(k^2 + 16T)\) 代码 #include<iostrea ...

  9. 在Centos中yum安装和卸载软件的使用方法(转)

    在Centos中yum安装和卸载软件的使用方法 安装方法 安装一个软件时 yum -y install httpd 安装多个相类似的软件时 yum -y install httpd* 安装多个非类似软 ...

  10. vim删除空行和注释

    vim删除空行和注释 来源:  http://jpuyy.com/2015/06/vim-delete-lines-using-regexp.html 删除空行 :g/^$/d 删除空行以及只有空格的 ...