bootstrapValidator.min.js表单验证插件

下面是关于bootstrapValidator表单验证插件的完整攻略。

Bootstrap Validator 概述

Bootstrap Validator 是一个用来为表单组件添加验证的 jQuery 插件。它使用了 Twitter Bootstrap 的样式，并集成了 jQuery 的特性，可以非常方便地为表单添加验证规则。

安装步骤

首先需要下载 Bootstrap Validator 插件，官网下载地址为：https://gitee.com/styczynski/bootstrap-validator。

1. 引入必要的库文件

在 head 头部引入需要的库文件：

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css">
<script src="//cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="dist/js/bootstrapValidator.min.js"></script>

其中，bootstrapValidator.min.js 就是 Bootstrap Validator 插件的核心文件，还需引入 Bootstrap 和 jQuery 的库文件。

1. 设置验证规则

定义表单元素，然后使用 data-* 标签来定义验证规则：

<form id="form" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">用户名：</label>
        <div class="col-xs-6">
            <input type="text" class="form-control" name="username" data-bv-notempty="true"
                   data-bv-stringlength="true" data-bv-stringlength-min="6" data-bv-stringlength-max="30">
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-3 control-label">密码：</label>
        <div class="col-xs-6">
            <input type="password" class="form-control" name="password" data-bv-notempty="true"
                   data-bv-stringlength="true" data-bv-stringlength-min="6" data-bv-stringlength-max="30">
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-primary">提交</button>
        </div>
    </div>
</form>

上述示例中定义了两个 input 输入框用于用户输入用户名和密码，同时使用了多个 data-* 标签来声明验证规则：

• data-bv-notempty="true"：输入框不能为空。

• data-bv-stringlength="true"：输入框的字符长度需要在一定范围内，上述定义的规则是6到30个字符。

• 初始化 Bootstrap Validator

上述代码的下方，使用以下代码初始化 Bootstarp Validator：

$(document).ready(function () {
    $('#form').bootstrapValidator();
});

这里的 #form 是指表单的 id，bootstrapValidator() 是 Bootstrap Validator 的初始化函数。

至此，在表单中就已经成功集成了 Bootstrap Validator 的表单验证插件。

1. 表单验证的一些高级用法

上述代码中只是一个简单的验证规则示例，还可以做更多的定制化操作，以下是一些高级用法：

• 远程验证

<input type="text" class="form-control" name="username" data-bv-remote="true"
       data-bv-remote-message="用户名不存在！" data-bv-remote-url="validate.php">

• 自定义验证函数

在 JavaScript 中增加自定义的验证规则函数：

$.fn.bootstrapValidator.validators.myValidator = {
    validate: function(validator, $field, options) {
        var value = $field.val();
        if (value === 'myValue') {
            return false;
        }
        return true;
    }
};

然后在表单中使用 data-bv-myvalidator="true" 定义该验证规则即可。

示例说明

接下来，通过两个示例来进一步说明 Bootstrap Validator 的用法。

示例 1：远程验证用户名是否存在

<form id="remoteForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">用户名：</label>
        <div class="col-xs-6">
            <input type="text" class="form-control" name="username" data-bv-remote="true"
                   data-bv-remote-message="用户名不存在！" data-bv-remote-url="validate.php">
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-primary">提交</button>
        </div>
    </div>
</form>

以上示例代码定义了一个表单输入框，使用户能够输入用户名，并且通过使用 data-bv-remote="true" 标签使其支持了远程验证，服务端返回响应信息可以配置在 data-bv-remote-message="用户名不存在！" 中。

服务端返回的响应可以是标准的 JSON 格式，例如：

{
    "valid": false
}

返回的 valid 可以为 true 或者 false，如果验证成功，返回 true，如果验证失败，则返回 false。

以上示例还需要在 JavaScript 中为 username 标签添加一个成功时和失败时的样式，代码如下：

$('#remoteForm').bootstrapValidator({
    fields: {
        username: {
            validators: {
                notEmpty: {
                    message: '用户名不能为空'
                },
                remote: {
                    message: '该用户名不存在',
                    url: 'validate.php',
                    type: 'POST'
                }
            },
            onSuccess: function(e, data) {
                alert(data.result);
            },
            onError: function(e, data) {
                alert(data.result);
            }
        }
    }
});

通过上述方法精确控制了输入框样式，可以在控制台进行 HTTP 请求的查看。

示例 2：自定义验证函数

<form id="customForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">邮箱：</label>
        <div class="col-xs-6">
            <input type="text" class="form-control" name="email" id="email" data-bv-emailaddress="true"
                   data-bv-emailaddress-message="该输入框必须是电子邮件地址">
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-3 control-label">确认邮箱：</label>
        <div class="col-xs-6">
            <input type="text" class="form-control" name="confirmEmail" id="confirmEmail"
                   data-bv-stringlength="true" data-bv-stringlength-min="5" data-bv-stringlength-max="50"
                   data-bv-stringlength-message="输入长度应该在5和50之间" data-bv-identical="true"
                   data-bv-identical-field="email" data-bv-identical-message="两次输入的电子邮件地址不匹配">
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-primary">提交</button>
        </div>
    </div>
</form>

以上示例实现了两个输入框用于输入电子邮件，验证过程为：第二个输入框中输入的内容必须和第一个输入框中的内容完全匹配，否则提示错误信息。

在 JavaScript 中为这两个输入框增加验证规则及提示信息：

$('#customForm').bootstrapValidator({
    fields: {
        email: {
            validators: {
                notEmpty: {
                    message: '电子邮件地址不能为空'
                },
                emailAddress: {
                    message: '电子邮件地址格式不正确'
                }
            }
        },
        confirmEmail: {
            validators: {
                notEmpty: {
                    message: '确认电子邮件地址不能为空'
                },
                stringLength: {
                    min: 5,
                    max: 50,
                    message: '长度应该在5和50之间'
                },
                identical: {
                    field: 'email',
                    message: '两次输入的电子邮件地址不匹配'
                }
            }
        }
    }
});

以上代码中在 email 中指定了是否为空和是否符合电子邮件地址格式这两个验证规则，而在 confirmEmail 中则指定了输入框长度需要在5和50之间，并且指定了在确认邮箱输入框中输入的内容必须与 email 输入框中的内容完全一致。

到此为止，Bootstarp Validator 的一些简单用法和高级用法就介绍完了，希望能够帮助到大家。