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

【问题标题】：How to use custom validators of github.com/1000hz/bootstrap-validator如何使用 github.com/1000hz/bootstrap-validator 的自定义验证器
【发布时间】：2015-04-20 22:20:45
【问题描述】：

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

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

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

将验证器添加到输入与其他操作一样，data-foo="bar"。

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

我不太明白如何定义我自己的自定义验证器以及如何将它与这个插件一起使用。

谁能给我一个简单的例子或提示？

【问题讨论】：

标签： javascript plugins custom-validators

【解决方案1】：

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

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

然后像这样使用它：

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

别忘了添加错误信息，see code

【讨论】：

请注意，自定义 data-* 名称必须全部小写，否则您的函数将无法在 jQuery 1.4+ 上运行。
我们需要明确的设置到表单元素：$("#myForm").validator(...);
不再使用错误选项。如果字段无效，验证函数应该返回错误消息。
这在表单加载时运行，甚至在按下提交之前。这是设计使然还是我犯了错误？

【解决方案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 中指定错误消息，则会在控制台中出现错误。因此，您必须在 Javascript 中声明错误消息。

【讨论】：

【解决方案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>">

“data-error”是默认的验证器错误，它被称为“native”键，下面的代码将演示验证器如何根据验证器键打印错误消息：

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

【讨论】：