BootstrapValidator验证表单使用指南

最新推荐文章于 2022-10-21 21:51:57 发布

彪悍的小Y

最新推荐文章于 2022-10-21 21:51:57 发布

阅读量221

点赞数

分类专栏： bootstrap

本文链接：https://blog.youkuaiyun.com/weixin_40886648/article/details/84390541

版权

bootstrap 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何利用Bootstrap Validator插件对HTML表单中的文件上传字段进行验证，包括引入必要的库文件、设置表单结构、定义验证规则及在JS中加载验证逻辑，确保上传的文件类型符合要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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