bootstrapValidator的基本使用（自定义校验规则，下拉选择校验）

首先，html

引 

<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="./lib/bootstrap-validator/css/bootstrapValidator.css">

<script src="./lib/jquery.js"></script>
<script src="./lib/bootstrap/js/bootstrap.js"></script>
<script src="./lib/bootstrap-validator/js/bootstrapValidator.js"></script>

 <div class="virtualMask" id='userInfoPanel' hidden>
                <div class="content-header">
                    <h4>新增用户</h4>
                </div>
                <div class="commonFrom">
                    <form class="form-inline">
                        <div class="form-group commonFromItem">
                            <label>姓名:</label>
                            <div class="commonFromItem_right">
                                <input type="text" maxlength='10' class="form-control" name="nickname" id="nickname">
                            </div>
                        </div>
                        <div class="form-group commonFromItem">
                            <label>手机号:</label>
                            <div class="commonFromItem_right">
                                <input type="text" maxlength='11' class="form-control" name="phone" id="phone">
                            </div>
                        </div>
                        <div class="form-group commonFromItem">
                            <label>所在分支机构:</label>
                            <div class="commonFromItem_right">
                                <select class="form-control" name="schoolName" id="schoolName">
                                    <option value='0'>请选择</option>
                                    <option value='1'>北京分支</option>
                                    <option value='2'>深圳分支</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group commonFromItem">
                            <label >简介:</label>
                            <div class="commonFromItem_right">
                                <textarea maxlength='200' class='form-control textarea_cc' name="remark" id="remark"></textarea>
                                <p class="valueDis">标题长度不超过200字符</p>
                            </div>
                        </div>
                        <div class="form-group commonFromItem">
                            <div class="commonFromItem_right">
                                <span class="greyButton" onclick='hideThisVirtualMask(this)'>取消</span>
                                <span flag='' valueId='' id='postUserBtn' onclick='postUser(this)' class="greenButton">确定</span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

然后，js定义校验规则

//校验用户信息
function ValidatorUserInfo(){
    $("#userInfoPanel").bootstrapValidator({
        excluded: [':disabled'],
        feedbackIcons: {
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            nickname: {//字段名
                validators: {
                    notEmpty: {//不能为空
                        message: '请输入姓名'
                    },
                    //长度校验
                    stringLength: {
                        min: 1,
                        max:11,
                        message: '字符长度必须在1位到10位之间'
                    },

                }
            },
            phone: {
                validators: {
                     notEmpty: {
                        message: '请输入手机号'
                    },
                    regexp: {
                        regexp: /^[1][3,4,5,7,8][0-9]{9}$/,
                        message: '请输入正确的手机号'
                    },
                }
            },
            schoolName: {
                validators: {
                    notEmpty: {
                        message: '请选择分支机构'
                    },
                    callback: {//用于select的校验
                        message: '请选择分支机构',
                        callback: function(value, validator) {
                            if (value == 0) {//"请选择"
                                    return false;
                                } else {
                                    return true;
                                }
                        }
                    }
                }
            },
            remark: {
                validators: {
                    notEmpty: {
                        message: '请输入简介'
                    },
                    //长度校验
                    stringLength: {
                        min: 1,
                        message: '字符长度必须在1位以上'
                    },
                }
            },
        }
    })
}

最后，使用校验--》先初始检验规则

$(function(){
    ValidatorUserInfo();
})

然后在js提交数据之前校验：

//提交
function postUser(thisObj){

     //验证销毁
     $("#userInfoPanel").data('bootstrapValidator').destroy();
     $('#userInfoPanel').data('bootstrapValidator', null);

     ValidatorUserInfo();

    $("#userInfoPanel").bootstrapValidator('validate');//提交验证
    if (!$("#userInfoPanel").data('bootstrapValidator').isValid()) {
        return
    }

  //检验成功执行post请求
   ...
}