BootstrapValidator验证表单使用指南

<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、表单提交前做如上的验证，验证通过则进行提交即可