Question

来自文档http://1000hz.github.io/bootstrap-validator/：

添加要运行的自定义验证程序。验证器应该是接收jQuery元素作为参数的函数，并根据输入的有效性返回truthy或falsy值。

对象结构是：{foo: function($el) { return true || false } }

将验证器添加到输入中就像其他data-foo="bar"一样。

您还必须通过errors选项为任何自定义验证器添加默认错误消息。

我不太了解如何定义自己的自定义验证器以及如何在此插件中使用它。

有人能给我一个简单的例子或提示吗？

Answer 1

您需要手动调用您的插件，因为custom选项不适用于数据属性：

$().validator({
    custom: {
        'odd': function($el) { return Boolean($el.val() % 2);}
    }
})

然后像这样使用它：

<input placeholder="plz enter odd value" data-odd>

请勿忘记添加错误消息see code

Answer 2

我想在这里详细解释答案。

我在尝试使用data-api（将data-toggle="validator"放在表单标记中）时尝试这样做。从我的<form>标记中删除它并使用Javascript启用它，我的自定义函数可以工作：

$('#sign-up_area').validator({
    custom: {
        'odd': function($el) { return Boolean($el.val() % 2);}
    },
    errors: {
        odd: "That's not an odd number!"
    }
});

我还必须在data-odd属性中添加一个值：

<div class="row">
    <div class="form-group col-xs-12 col-md-12">
        <label class="control-label" for="test">Odd/Even:</label>
        <input type="text" name="test" id="test" class="form-control" placeholder="Enter an odd integer" data-odd="odd" >
        <span class="help-block with-errors"></span>
    </div>
</div>

有趣的是，如果我将以下内容添加到<input>元素，则它优先于javascript中声明的错误消息：

data-odd-error="Not an odd number, yo!"

但是，如果我只使用data-odd-error属性但在Javascript中指定了NO错误消息，则在控制台中出现错误。因此，您必须在Javascript中声明错误消息。

Answer 3

首先添加您自己的自定义验证器，例如：

var validatorOptions = {
        delay: 100,
        custom: {
            unique: function ($el) {
                var newDevice = $el.val().trim();
                return isUniqueDevice(newDevice)
            }
        },
        errors: {
            unique: "This Device is already exist"
        }
    }

其次，您需要“绑定”自定义验证器的表单输入，例如：

<input id="add_new_device_input"  class="form-control"  data-unique="unique">

如果要添加此输入更多验证器错误，您必须将自定义错误添加到输入：data-unique-error =“此设备已存在” 例如：

<input id="add_new_device_input"  class="form-control"  data-unique="unique" data-unique-error="This device is already exist" data-error="The Device pattern is invalid" pattern="<Add some regex pattern here>">

“数据错误”是默认的验证器错误，它称为“本机”密钥，以下代码将演示验证器如何根据验证器密钥打印错误消息：

   function getErrorMessage(key) {
  return $el.data(key + '-error')
    || $el.data('error')
    || key == 'native' && $el[0].validationMessage
    || options.errors[key]
}

如何使用github.com/1000hz/bootstrap-validator的自定义验证器

3 个答案: