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>为什么使用bootstrap?
</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>
效果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。