首先,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请求
...
}