自定义验证
endTime: {
validators: {
notEmpty: {
message: '请选择结束时间'
},
callback: {
message: '结束日期不能小于开始日期',
callback:function(value, validator,$field){
if(scope.startTime==undefined||scope.endTime==undefined){
return true;
}
return new Date(scope.startTime).getTime()<=new Date(scope.endTime).getTime();
}
}
}
}
编辑的时候，防止验证状态一直存在
$("#dataForm").bootstrapValidator('destroy');
提交的时候代码组合
$('#dataForm').data('bootstrapValidator').validate();
if(!$('#dataForm').data('bootstrapValidator').isValid()){
return false;
}
完整demo
<!DOCTYPE html>
<html>
<head>
<title>Using Ajax to submit data</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
</head>
<body>
<div class="container">
<!-- class都是bootstrap定义好的样式，验证是根据input中的name值 -->
<form id="defaultForm" method="post" class="form-horizontal" action="aaa.html">
<!-- 下面这个div必须要有，插件根据这个进行添加提示 -->
<div class="form-group">
<label class="col-lg-3 control-label">Username</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email address</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Password</label>
<div class="col-lg-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-primary">Sign up</button>
</div>
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
/**
* 下面是进行插件初始化
* 你只需传入相应的键值对
* */
$('#defaultForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {/*输入框不同状态，显示图片的样式*/
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {/*验证*/
username: {/*键名username和input name值对应*/
message: 'The username is not valid',
validators: {
notEmpty: {/*非空提示*/
message: '用户名不能为空'
},
stringLength: {/*长度提示*/
min: ,
max: ,
message: '用户名长度必须在6到30之间'
},
callback: {/*自定义，可以在这里与其他输入项联动校验*/
message: '只能是wm5920',
callback:function(value, validator,$field){
return value==='wm5920';
}
}
}
},
password: {
message:'密码无效',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: ,
max: ,
message: '用户名长度必须在6到30之间'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
}
}
});
});
</script>
</body>
</html>
![响应式前端框架Bootstrap系列（3）段落、文字相关[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)