使用bootstrap validator的remote验证代码经验分享(推荐)

2023年6月10日下午8:37 • JavaScript

这里是使用Bootstrap Validator的Remote验证代码经验分享攻略。

什么是Remote验证

Bootstrap Validator提供了Remote验证来检查输入是否已经存在于数据库中，而不是使用静态的规则来验证。在其最基本的形式中，Remote验证使用AJAX请求来检查输入是否已经存在于数据库中，并根据结果来反馈验证的状态。

开始使用Remote验证

首先，需要在表单中指定需要验证的输入，并在其中添加data-remote属性：

<form id="myForm" method="post">
    <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" class="form-control" id="username" name="username" data-remote="/check-username" required>
        <div class="help-block with-errors"></div>
    </div>
    <button type="submit">提交</button>
</form>

上面的代码中，data-remote属性指定了需要进行远程验证的url地址。其中，/check-username是服务器端的地址。

在服务器端，需要根据实际情况进行处理并返回状态。在该例中，当用户名已经存在时，应该返回状态码为400，否则返回200：

$app->post('/check-username', function() use ($app) {
    $username = $_POST['username'];
    // 进行数据库查询操作
    if($username_already_exists) {
        $app->halt(400, '该用户名已经存在');
    } else {
        $app->halt(200);
    }
});

这样，在用户输入实时验证时，Bootstrap Validator将发送请求到服务器端地址，并根据返回的状态码和消息来切换验证的状态。

自定义Remote验证

关于Remote验证，还可以更进一步的自定义，以满足特殊需求。下面是一个自定义Remote验证的例子。

假设需要在用户输入的时候验证以下规则：输入的数值大于Ivan的输入数值：

<form id="myForm" method="post">
    <div class="form-group">
        <label for="ivan">Ivan输入数值</label>
        <input type="text" class="form-control" id="ivan" name="ivan" required>
        <div class="help-block with-errors"></div>
    </div>
    <div class="form-group">
        <label for="user">用户数值</label>
        <input type="text" class="form-control" id="user" name="user" data-remote="/check-number" data-remote-data-type="JSON" required>
        <div class="help-block with-errors"></div>
    </div>
    <button type="submit">提交</button>
</form>

这里，对于Ivan输入值的验证，我们并不需要使用Remote验证，因为它是静态的，所以我们直接跳过，接下来看看用户的输入数据变化如何被监控。

以下是服务器端的代码：

$app->post('/check-number', function() use ($app) {
    $ivan = $_POST['ivan'];
    $user = $_POST['user'];
    if($ivan < $user) {
        $app->halt(200, json_encode(['valid' => true]));
    } else {
        $app->halt(400, json_encode(['valid' => false, 'message' => '请输入一个比Ivan输入数值更大的数值']));
    }
});

在这个例子中，我们通过在data-remote属性中指定需要验证的URL，并使用data-remote-data-type变量将数据类型设置为JSON。

在服务器返回一个JSON字符串时，我们必须对BootstrapValidator实例中定义的callback（远程验证回调函数）进行调用，这将是处理从服务器返回的数据的关键。

如下所示：

$('form').validator({
    custom: {
        isGreater: function($el) {
            var dfd = new $.Deferred();
            var data = {};
            data[$el.attr('name')] = $el.val();
            data.ivan = $('#ivan').val();
            $.ajax({
                url: '/check-number',
                type: 'POST',
                data: data,
                dataType: 'json',
                success: function(result) {
                    if (result.valid === true) {
                        dfd.resolve();
                    } else {
                        dfd.reject(result.message);
                    }
                }
            });
            return dfd;
        }
    },
    errors: {
        isGreater: '请输入一个比Ivan输入数值更大的数值'
    },
    // 
    live: 'submitted'
});

在这段代码中，我们定义了一个自定义验证器isGreater，该验证器比较用户输入的值和Ivan输入的值。因为我们需要自定义验证器，所以必须使用$.Deferred()来管理验证器是否完成。

最后，我们需要在代码中指定错误消息（在这个例子中，指定的是'请输入一个比Ivan输入数值更大的数值'）和在严重情况下所采取的操作（在这个例子中，操作是拒绝验证）。