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

首先要熟悉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. z=sin(xy)

    看了<千年难题>,第一章是黎曼猜想.里面有两个我很感兴趣的问题:一是关于函数的图形表示方式,比如z=sin(xy)的图像,二是大数的因子分解方式. 专业的数学软件应该能够很容易的生成各种函 ...

  2. [转载]Unicode中对中文字符的编码

    以前写过一篇贴子是写中文在unicode中的编码范围 unicode中文范围,但写的不是很详细,今天再次研究了下unicode,并给出详细的unicode取值范围. 本次研究的unicode对象是un ...

  3. Codeforces Round #371 & HihoCoder1529【玄学】

    时间限制:40000ms 单点时限:2000ms 内存限制:256MB 描述 给定一个长度为 n 的非负整数序列 a[1..n]. 你每次可以花费 1 的代价给某个 a[i] 加1或者减1. 求最少需 ...

  4. static类和no static类的区别

    1.static类,只能有静态成员,不能被实例.静态的东西在内存中只有一份,调用速度会快,但是相对费内存. 2.在另外一个类内部定义的类,此类的实例化不希望依赖外部类的实例化,此时可以定义为静态类(即 ...

  5. [深度学习]实现一个博弈型的AI，从五子棋开始

    好久没有写过博客了,多久,大概8年???最近重新把写作这事儿捡起来……最近在折腾AI,写个AI相关的给团队的小伙伴们看吧. 搞了这么多年的机器学习,从分类到聚类,从朴素贝叶斯到SVM,从神经网络到深度 ...

  6. 腾讯加入QQ群，代码生成地址

    腾讯加入QQ群,代码生成地址 http://qun.qq.com/join.html

  7. FastAdmin 中使用 Oder by if 强行将某一类放到前面

    FastAdmin 中使用 Oder by if 强行将某一类放到前面 问题来源社区问题 1,查了一些资料2,做了测试. 如下表,我想把 snake 单独放到开始. 可以使用以下查询语句(默认为 AS ...

  8. i.e 和e.g 的区别

    i.e 和e.g 的区别 两者都是拉丁文缩写 i.e是id est的缩写,意思是that is. e.g是exempli gration的缩写,意思是for example;

  9. Spring AOP表达式报错：Pointcut is not well-formed: expecting 'name pattern' at character position

    问题现象: java.lang.IllegalStateException: Failed to load ApplicationContext at org.springframework.test ...

  10. textArea中的maxlength是无效的 解决办法

    --------------------------------------------------------------------------------------   <s:texta ...