一、使用须知
- 插件下载：https://github.com/nghuuphuoc/bootstrapvalidator
- API：http://bootstrapvalidator.votintsev.ru/api/
- 推荐：https://www.cnblogs.com/landeanfen/p/5035608.html
二、新手上路
1.在页面中引入相应的js和css，要知道bootstrap是基于jquery的，所以先引入jquery和bootstrap
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrapValidator.min.css" >
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/bootstrapValidator.min.js"></script>
好了，将上述的css和js引入到页面中就可以愉快的开发了。
2. html中的代码（这里只是为了举例拿用户名和邮箱示例一下）：
<form id="form1" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">用户名：</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">邮箱：</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-primary" name="signup" value="Sign up">提交</button>
</div>
</div>
</form>
注意：使用bootstrapValidator验证插件必须将表单里的组件包裹在<div class="form-group">这个标签中，并且一个需要验证的组件对应一个<div class="form-group">，这样提示信息才会高亮显示。
3. js中的代码
<script type="text/javascript">
$(document).ready(function() {
$('#form1').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
'username': {
message: '用户名无效',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名长度在6到30之间'
}
}
},
'email': {
validators: {
emailAddress: {
message: '请输入有效的邮箱格式'
}
}
}
}
});
});
</script>
注意：feedbackIcons是设置验证通过和不通过的图标的，fields是用来设置from中具体的表单元素验证的。
三、触类旁通
通过上面的方式我们可以轻松的对表单元素进行各种验证，但是上面这种写法确实分离我们验证的业务代码，但是实际开发中我们更喜欢将验证信息嵌在表单元素中，因为这样会更省时省力，直接copy改就可以了。那么BootstrapValidator这个插件是否支持在表单元素中直接去写呢，答案当然是肯定的。
1. html代码：
<form id="form1" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">用户名：</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="username" placeholder="请输入用户名"
required data-bv-notempty-message="用户名称不能为空"
data-bv-stringlength="true" data-bv-stringlength-min="6"
data-bv-stringlength-max="30" data-bv-stringlength-message="用户名长度在6到30之间"/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">邮箱：</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="email" placeholder="请输入邮箱"
data-bv-emailAddress="true" data-bv-emailAddress-message= '请输入有效的邮箱格式' />
</div>
</div>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-primary" name="signup" value="Sign up">提交</button>
</div>
</div>
</form>
2. js代码：
<script type="text/javascript">
$(document).ready(function() {
$('#form1').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
}
});
});
</script>
3. 不用submit提交，使用点击事件触发校验
页面上有个按钮id为btn_save_id，代码如下
<script type="text/javascript">
$(document).ready(function() {
$("#btn_save_id").click(function(){
$('#form1').bootstrapValidator('validate');
if($('#form1').data('bootstrapValidator').isValid()) {
//验证通过，执行后续操作
}
});
});
</script>
四、牛刀小试
下面是我碰到的一些验证，可以将验证代码直接嵌入到表单元素中
1. 正整数（正则）验证
pattern="^\+?[0-9][0-9]*$" data-bv-regexp-message="请输入正确的数字"
2. 数值类型验证
data-bv-numeric="true" data-bv-numeric-message="请输入数值类型"
3. 长度验证
data-bv-stringlength="true" data-bv-stringlength-min="1"
data-bv-stringlength-max="20" data-bv-stringlength-message="长度最大为20个字符"
4. 自定义验证规则（json验证）
data-bv-callback="true" data-bv-callback-callback="validByJsonFn" data-bv-callback-message="请输入可识别的JSON格式"
<script type="text/javascript">
//验证是否是{"key":"value"}这种json格式的方法
function validByJsonFn(value) {
var bool=false;
try {
if(value!==""){
if(value.length>8&&value.indexOf("[")!=-1&&value.indexOf("]")!=-1
&&value.indexOf("{")!=-1&&value.indexOf("}")!=-1&&value.indexOf(":")!=-1){
var myjson= JSON.parse(value);
bool=true;
}else{
bool=false;
}
}else{
bool=true;
}
} catch (e) {
bool=false;
}
return bool;
}
</script>
5. 表单元素二填一验证（两个input填一个即可）
<div class="form-group">
<label for="description" class="col-sm-3 control-label">每天投票数量：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="votesPerDay" name="votesPerDay"
data-bv-callback="true" data-bv-callback-callback="validByVotingFn"
data-bv-callback-message="每天投票数量和总共投票数量必须选填一个"
data-bv-numeric="true" data-bv-numeric-message="请输入数值类型"
data-bv-stringlength="true" data-bv-stringlength-min="1"
data-bv-stringlength-max="11" data-bv-stringlength-message="长度最大为11个字符"/>
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-3 control-label">总共投票数量：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="totalVotes" name="totalVotes"
data-bv-callback="true" data-bv-callback-callback="validByVotingFn"
data-bv-callback-message="每天投票数量和总共投票数量必须选填一个"
data-bv-numeric="true" data-bv-numeric-message="请输入数值类型"
data-bv-stringlength="true" data-bv-stringlength-min="1"
data-bv-stringlength-max="11" data-bv-stringlength-message="长度最大为11个字符"/>
</div>
</div>
js代码：
<script type="text/javascript">
function validByVotingFn(value,e,v){
var num1=$("#votesPerDay").val();
var num2=$("#totalVotes").val();
var bool=false;
if(num1||num2){
$("#totalVotes").attr("disabled",false);
$("#votesPerDay").attr("disabled",false);
$("#form1").data("bootstrapValidator").updateStatus("votesPerDay","NOT_VALIDATED",null);
$("#form1").data("bootstrapValidator").updateStatus("totalVotes","VALIDATED",null);
bool=true;
}
if(num1&&num1.length>0){
$("#totalVotes").val("").attr("disabled",true);
}else{
$("#totalVotes").attr("disabled",false);
}
if(num2&&num2.length>0){
$("#votesPerDay").val("").attr("disabled",true);
}else{
$("#votesPerDay").attr("disabled",false);
}
return bool;
}
</script>
6. 还有很多很多验证，不过常用的可能基本上也就这些了，后面碰到我再补充上来
五、纵横江湖
重置某个字段验证信息
$("#form3").data("bootstrapValidator").updateStatus("answerList","VALIDATED",null);
注意：第一个参数为表单元素name，第二个参数可以是NOT_VALIDATED，VALIDATING，INVALID或者VALID，第三个参数验证程序名称，如果null该方法更新所有验证器的有效性结果。
网友评论