如何在 Bootstrap 验证中创建自定义验证

Question

我的目标是验证一个特定的文本字段，该字段依赖于另一个元素的值。

例如，我有一个选择字段和一个输入文本字段。

仅当 select 标记具有选定值时才需要输入文本。

希望有人能帮忙。

原文由 Andoy Abarquez 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

看一眼

http://bootstrapvalidator.com/

在我们的项目中，我们使用的是与 Bootstrap 集成的 Backbone 验证器

https://github.com/thedersen/backbone.validation

集成 Backbone.validation 和 Bootstrap 的示例

[jsfiddle.net/thedersen/c3kK2/][1]

也就是说，如果您使用的是 Backbone :)

对于 bootstrapvalidator 有一个用于验证的 回调 方法

http://bootstrapvalidator.com/validators/callback/

来自示例：

   <input type="text" class="form-control" name="captcha"
                data-bv-callback="true"
                data-bv-callback-message="Wrong answer"
                data-bv-callback-callback="checkCaptcha" />

和JS

 function checkCaptcha(value, validator) {
    // Determine the numbers which are generated in captchaOperation
    var items = $('#captchaOperation').html().split(' '),
        sum   = parseInt(items[0]) + parseInt(items[2]);
   return value == sum;
};

$(document).ready(function() {
    // Return a random number between min and max
    function randomNumber(min, max) {
       return Math.floor(Math.random() * (max - min + 1) + min);
    };

    // Generate a sum of two random numbers
    function generateCaptcha() {
        $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
    };

    generateCaptcha();

    $('#callbackForm').bootstrapValidator();
});

您可以用它实现任意验证。

所以你的验证可以通过一些全局函数来实现

使用 HTML

   <input type="text" class="form-control" name="captcha"
                data-bv-callback="true"
                data-bv-callback-message="Wrong answer"
                data-bv-callback-callback="specialValidation" />

用 JS

  function specialValidation(value, validator) {
    // Determine the numbers which are generated in captchaOperation
    var items = $('#otherField').txt();
    return value == sum;
};

并且您需要对元素属性进行创意，以正确链接相关元素。

原文由 mavarazy 发布，翻译遵循 CC BY-SA 3.0 许可协议