<link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="/path/to/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script>
// 帶衆多常用默認驗證規則的
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.js"></script>
1、第一步。引入上面的文件
<form id="upFileForm">
<table class='table table-bordered table-striped'>
<tr>
<td>
<div class="form-group">
<input class="form-control" type="file" name="myFile" ng-model="myFile"
data-bv-notempty="true"
data-bv-notempty-message="不能爲空!"
data-bv-file-type="application/pdf"
>
</div>
</td>
<td>
<button class="btn btn-block btn-success btn-lg" ng-click="upFile()">上傳</button>
</td>
</tr>
</table>
</form>
2、寫表單,其中要注意的是,需要驗證的元素必須用
<div class="form-group">
包圍
3、需要制定每一個元素的name屬性,不然驗證總是爲true
$(document).ready(function () {
$('#upFileForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
}
});
4、在JS文件中,加載驗證規則(如上)
var bv = $("#upFileForm").data("bootstrapValidator");
bv.validate();
if (bv.isValid()) {
5、表單提交前做如上的驗證,驗證通過則進行提交即可