bootstrapValidator的基本使用（使用callback自定义校验规则）

首先，html

引 

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

<script src="./lib/jquery.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: {
                        message: '请选择分支机构',
                        callback: function(value, validator) {
                            //这里可以自定义value的判断规则
                            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请求
   ...
}

【使用注意】：

1 上面的input不是一定要放在form表单内；

2 input 外面的盒子需加上 class="form-group" ，否则会有报错 ：Maximum call stack size exceeded

3 input 加上 class='form-control' 可控制input获得焦点时的阴影；input校验的边框样式可通过 外面盒子 .form-group的 .has-success与.has-error去控制input的定义样式：

.has-error .help-block{
    line-height: 45px;
    color: red;
}
.has-error input{
    border-color: red !important;
}
.has-success input{
    border-color: green !important;
}

<li class='form-group detail_item clearfix'>
    <span class='title'>原密码</span>
    <div class='item_right'>
        <input name='password' type='password' placeholder='请输入'>
    </div>
</li>
<li class='form-group detail_item clearfix'>
    <span class='title'>新密码</span>
    <div class='item_right'>
        <input class='form-control' name='newPassword' type='password' placeholder='请输入'>
    </div>
</li>

效果：