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

这里是使用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输入数值更大的数值'）和在严重情况下所采取的操作（在这个例子中，操作是拒绝验证）。

总结

这就是使用Bootstrap Validator的Remote验证的经验分享。Remote验证为Web开发人员提供了一种有效的方式来验证用户输入是否在数据库中存在，或者进行其他用户定义的验证规则。无论你使用的是何种数据库类型，都可以使用Remote验证，以确保数据的正确性。