bootstrapValidator表单验证使用方法

前言

项目中运用到了表单验证，我运用了bootstrapValidator.js 表单验证，下面说下我是怎么运用的。 欢迎大家去我的网站查看

引入

<script type="text/javascript" src="../js/bootstrapValidator.js"></script>
<link rel="stylesheet" href="../css/bootstrapValidator.min.css" />

html

<form id="defaultForm" role="form" class="form-horizontal fv-form fv-form-bootstrap" action="" method="" style="width: 40%;margin-left: 26%;">
                <div class="form-group">
                    <label class="col-md-4 control-label" for="orderPhone">手机号:</label>
                    <div class="col-md-6">
                        <input class="form-control"  placeholder="必填" name="orderPhone" id="orderPhone" type="text"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 control-label" for="orderProductName">产品名称:</label>
                    <div class="col-md-6">
                        <input class="form-control"  placeholder="必填" name="orderProductName" id="orderProductName" type="text"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 control-label" for="orderProductId">产品ID:</label>
                    <div class="col-md-6">
                        <input class="form-control"  placeholder="必填" name="orderProductId" id="orderProductId" type="text"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 control-label" for="orderCrmChannelId">CRM受理渠道ID:</label>
                    <div class="col-md-6">
                        <input class="form-control"  placeholder="必填" name="orderCrmChannelId" id="orderCrmChannelId" type="text"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 control-label" for="orderCrmStaffCd">CRM受理工号:</label>
                    <div class="col-md-6">
                        <input class="form-control"  placeholder="必填" name="orderCrmStaffCd" id="orderCrmStaffCd" type="text"/>
                    </div>
                </div>
                <div class="modal-footer"  style="border-top:none; " id="returnBtn">
                    <button class="btn btn-success btn-sm"   onclick="confirmSubmit()" type="button">提交</button>
                    <button class="btn btn-danger btn-sm" id="revisePevReturn"  onclick="returnRevise()" type="button">返回</button>
                 </div>
            </form>

js

验证

function validator(){
    $('#defaultForm')
        .bootstrapValidator({
            message: '输入值无效',
            feedbackIcons: { /*input状态样式图片*/
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: { /*验证：规则*/
                orderPhone: {
                    message: '手机号无效',
                    validators: {
                        notEmpty: {
                            message: '手机号必填'
                        },
                        regexp: { //匹配规则
                            regexp: /^[1][3,4,5,7,8][0-9]{9}$/,
                            message: '必须手机号'
                        }
                    }
                },
                orderProductName: {
                    message: '产品名称无效',
                    validators: {
                        notEmpty: {
                            message: '产品名称必填'
                        }
                    }
                },
                orderProductId: {
                    message: '产品ID无效',
                    validators: {
                        notEmpty: {
                            message: '产品ID必填'
                        }
                    }
                },
                orderCrmChannelId: {
                    message: 'CRM受理渠道ID无效',
                    validators: {
                        notEmpty: {
                            message: 'CRM受理渠道ID必填'
                        }
                    }
                },
                orderCrmStaffCd: {
                    message: 'CRM受理工号无效',
                    validators: {
                        notEmpty: {
                            message: 'CRM受理工号必填'
                        }
                    }
                }
            }
        })
}

调用

confirmSubmit = function(){
    validator();
    //开启验证
    $('#defaultForm').data('bootstrapValidator').validate();
    //是否通过校验
    if(!$('#defaultForm').data('bootstrapValidator').isValid()){
        //没有通过校验
    }else{
       通过验证执行的函数
    }
}