1、引入相关css/js文件，除了已经引入jQuery、bootstrap相关的css\js文件，还要引用bootstrapValidator相关文件，如下：
<link href="<%=basePath%>static/bootstrapStatic/css/bootstrap/bootstrapValidator.min.css" rel="stylesheet" />
<script src="<%=basePath%>static/bootstrapStatic/js/bootstrap/bootstrapValidator.min.js" type="text/javascript" ></script>
2、编辑HTML代码，我们以验证一个下拉列表和一个输入框为例子，需要注意的是，要验证的数据组件一定要放在<div class="form-group"><div>中，否则会报错，代码如下：
<form action="${prefix}/${action }" id="dataForm" method="post" class="form-info" enctype="multipart/form-data" >
<!-- 隐藏的数据字段 -->
<input type="hidden" name="id" id="id" value="${pd.id }" />
<div id="zhongxin">
<table>
<tr>
<td><label>小区名称</label></td>
<td>
<div class="form-group">
<select name="apartmentId" id="apartmentId" class="form-control selectpicker show-tick" data-live-search="true" size="10">
<option value="" selected >所有</option>
<c:forEach items="${apartmentVoList}" var="apartmentVo">
<option value="${apartmentVo.id }" <c:if test="${apartmentVo.id == pd.apartmentId }">selected="selected"</c:if> >${apartmentVo.name }</option>
</c:forEach>
</select>
</div>
</td>
</tr>
<tr>
<td><label>门名称</label><b style="color: red;">*</b></td>
<td>
<div class="form-group">
<input type="text" name="name" id="name" value="${pd.name }" size="20" class="form-control">
</div>
</td>
</tr>
</table>
<br>
<div class="form-group" style="text-align: center;">
<a class="btn btn-mini btn-primary" onclick="save();">保存</a>
<a class="btn btn-mini btn-danger" onclick="top.Dialog.close();">取消</a>
</div>
</div>
<div id="zhongxin2" class="center" style="display: none">
<br /> <br /> <br /> <br /> <img src="<%=basePath%>static/bootstrapStatic/images/jiazai.gif" /><br />
<h4 class="lighter block green"></h4>
</div>
</form>
3、编写表单验证的js代码，这里要特别注意，一定要有 excluded : [':disabled'], 这行，不然下拉列表得验证将会无效。
<script type="text/javascript">
//输入表单验证
$(function () {
$('form').bootstrapValidator({
message: 'This value is not valid',
excluded : [':disabled'],//[':disabled', ':hidden', ':not(:visible)']
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
apartmentId: {
validators: {
notEmpty: {
message: '请选择一个项目'
}
}
},
name: {
message: '名称验证失败',
validators: {
notEmpty: {
message: '名称不能为空'
}
}
}
}
});
});
</script>
4、编写表单验证触发以及表单数据提交的js代码，由于这里不是用submit标签直接提交，而是点击保存按钮时候触发save()方法执行提交操作，因此需要在save()方法中手动执行表单验证并且判断验证结果，具体看下面的代码；
还有不能用jquery的方式执行提交，就是$('#dataForm').submit()这个方法在引入bootstrapValidator后会无法执行，因此需要使用原生js通过id获取表单元素如何执行submit()方法，见下面的代码。
<script type="text/javascript">
//保存
function save() {
/*手动验证表单，当是普通按钮时。*/
$('form').data('bootstrapValidator').validate();
if(!$('form').data('bootstrapValidator').isValid()){
return ;
}
document.getElementById("dataForm").submit();
$("#zhongxin").hide();
$("#zhongxin2").show();
}
</script>
5、最后看一下效果截图，当未选中小区以及未输入门名称时候就点击按钮，结果如下：
image.png
