使用前提,需要加载jquery和bootstrap库。
并且引入bootstrapValidator.js和bootstrapValidator.css文件
然后建立一个form表单,添加表单控件,表单控件需要有绝对定位。不然会报错
例如:
<form class="form-horizontal clearfix" onsubmit="return false">
<div class="form-group col-sm-12 col-md-12">
<label for="discuss_editor_item_text" class="col-sm-2 col-md-2 control-label">评论内容:</label>
<div class="col-sm-10 col-md-10">
<textarea id="discuss_editor_item_text" class="form-control" name="text" rows="8">{{:text}}</textarea>
<p class="help-block"></p>
</div>
</div>
</form>
js部分编写文件如下:
setValidator:function() {
$('form',‘#discuss_editor’).bootstrapValidator({
message:'必须填写',//不满足条件时的提示消息
feedbackIcons: { //根据验证结果显示出来的各种图标
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields:{
text:{
validators:{
notEmpty:{}, //检测非空
stringLength: { //检测长度
max: 3000,
utf8Bytes: true,
message: "不能超过1000字"
}
}
}
}
})
}
validate: function() {
$('form', ‘#discuss_editor’).data('bootstrapValidator').validate();
return $('form', ‘#discuss_editor’).data('bootstrapValidator').isValid();
}
*******************************
*验证部分要有form-group包裹
*input要有class="form-control"
*name属性规定验证机制的名字
*******************************
除了检测是否空值和长度以外,还有很多种检测如regexp(正则检测)、remote(将内容发送到指定页面检测)、different(与指定的文本框比较内容)、emailAddress(email地址检测)等等,具体可参考http://bootstrapvalidator.votintsev.ru/settings/ 官网