BootstrapValidator 项目使用教程

2025-04-17 12:54:21作者：胡易黎Nicole

1. 项目目录结构及介绍

BootstrapValidator 是一个基于 Bootstrap 的表单验证插件，项目目录结构如下：

demo/：示例文件目录，包含了各种使用 BootstrapValidator 的示例。
dist/：编译后的文件目录，包含了压缩和未压缩的 JavaScript 和 CSS 文件。
screenshots/：项目截图目录，展示了插件在不同场景下的效果。
src/：源代码目录，包含了插件的 JavaScript 和 CSS 源文件。
test/：测试文件目录，包含了用于验证插件功能的单元测试。
vendor/：第三方库目录，包含了项目依赖的库文件。
.gitignore：Git 忽略文件，指定了 Git 应该忽略的文件和目录。
CHANGELOG.md：更新日志文件，记录了项目的所有更新和改动。
CONTRIBUTORS.md：贡献者列表文件，列出了所有为项目贡献的开发者。
Gruntfile.js：Grunt 配置文件，用于自动化构建和测试过程。
LICENSE.txt：项目许可证文件，声明了项目的开源协议。
README.md：项目自述文件，包含了项目的简介和使用说明。
bootstrapValidator.jquery.json、bower.json、package.json：项目配置文件，分别用于 jQuery 插件库、Bower 和 npm 包管理器。

2. 项目的启动文件介绍

项目的启动主要是通过引入 dist/ 目录下的 BootstrapValidator 的 JavaScript 文件完成的。以下是一个简单的 HTML 启动示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>BootstrapValidator 使用示例</title>
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.css">
    <!-- 引入 BootstrapValidator CSS -->
    <link rel="stylesheet" href="path/to/dist/bootstrapValidator.css">
</head>
<body>
    <form id="defaultForm" class="form-horizontal" role="form">
        <!-- 表单内容 -->
    </form>

    <!-- 引入 jQuery -->
    <script src="path/to/jquery/jquery.min.js"></script>
    <!-- 引入 BootstrapValidator JS -->
    <script src="path/to/dist/bootstrapValidator.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#defaultForm').bootstrapValidator();
        });
    </script>
</body>
</html>

在这个示例中，通过在 <head> 中引入 Bootstrap 的 CSS 文件和 BootstrapValidator 的 CSS 文件，然后在 <body> 底部引入 jQuery 和 BootstrapValidator 的 JavaScript 文件，并在文档加载完成后调用 bootstrapValidator() 方法来初始化验证。

3. 项目的配置文件介绍

BootstrapValidator 的配置主要通过调用 bootstrapValidator() 方法时传递一个配置对象来完成。以下是一些基本配置的示例：

$('#defaultForm').bootstrapValidator({
    // 指定验证消息的容器，默认情况下，验证消息会放置在验证元素的下一个元素中
    message: 'This value is not valid',
    // 指定验证触发的事件，默认情况下是 'blur' 和 'input' 事件
    trigger: 'blur input',
    // 指定验证规则
    fields: {
        // 对 'username' 字段进行验证
        username: {
            // 规则
            validators: {
                // 非空验证
                notEmpty: {
                    message: '用户名不能为空'
                },
                // 字符长度验证
                stringLength: {
                    min: 6,
                    max: 30,
                    message: '用户名长度必须在6到30之间'
                },
                // 正则表达式验证
                regexp: {
                    regexp: /^[a-zA-Z0-9_]+$/,
                    message: '用户名只能包含字母、数字和下划线'
                }
            }
        },
        // 其他字段的验证规则...
    }
});