<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、表單提交前做如上的驗證，驗證通過則進行提交即可