Bootstrap 与 Jquery validate 结合使用——多个规则实现

Posted 2020-09-10 牵着妞去散步

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

首先要熟悉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>

结果可行。

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