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

首先要熟悉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. SVN 如何更新整个目录

    SVN 有时会遇到更新整个目录的情况, 比如依赖的某个库有了新版本, 需要更新. 这个时候的处理可能需要注意一些问题.(直接跳到最后看结论) 举个例子: 根文件是 test, 里面用 external ...

  2. BZOJ1229 USACO2008 Nov toy 玩具 【三分+贪心】*

    BZOJ1229 USACO2008 Nov toy 玩具 Description 玩具 [Chen Hu, 2006] Bessie的生日快到了, 她希望用D (1 <= D <= 10 ...

  3. springboot 填坑一 springboot java.sql.SQLException: Access denied for user ''@'localhost' (using password: NO)

    这里有个很不明显的错误  初次搭建很容易犯这个错

  4. pat甲级 1152 Google Recruitment （20 分）

    In July 2004, Google posted on a giant billboard along Highway 101 in Silicon Valley (shown in the p ...

  5. altium常用快捷键记录

    选中一个网络的点和线ctrl+h: 翻转器件的层 鼠标拖动+L: 镜像器件 鼠标拖动+x: 查看单一层shift+s: 隐藏/查看某些器件ctrl+d:

  6. kong 安装

    1. yum 参考信息 https://bintray.com/kong/kong-community-edition-rpm $ sudo yum install epel-release $ su ...

  7. 我的 Git 学习过程

    我的 Git 学习过程 有 SVN 使用基础. 开始使用 FastAdmin 后正式使用 Git. 找了一篇廖雪峰的 <Git 教程> 找到一个在线学习 Git 的教程 https://l ...

  8. Oracle DB备份恢复篇之丢失控制文件

    实验目的 本篇主要模拟控制文件丢失后,如何根据实际情况恢复数据库,才能使数据库尽可能不丢失数据. 实验环境 1)Linux系统环境 [oracle@DG1 ~]$ lsb_release -a LSB ...

  9. shell三剑客之find

    查找以ini结尾的文件[root@iZj6cbstl2n6r280a27eppZ app]# find / -name "*.ini"/app/myblog/config.ini ...

  10. DP 过河卒

    棋盘上A点有一个过河卒,需要走到目标B点.卒行走的规则:可以向下.或者向右.同时在棋盘上C点有一个对方的马,该马所在的点和所有跳跃一步可达的点称为对方马的控制点.因此称之为“马拦过河卒”. 棋盘用坐标 ...