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

Question

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

Add custom validators to be run. Validators should be functions that receive the jQuery element as an argument and return a truthy or falsy value based on the validity of the input.

Object structure is: {foo: function($el) { return true || false } }

Adding the validator to an input is done just like the others, data-foo="bar".

You must also add default error messages for any custom validators via the errors option.

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

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

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

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

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

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

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

如果您想向此输入添加更多验证器错误，您必须向输入添加自定义错误：data-unique-error="This device is already exist" 例如：

<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]
}

Answer 3

我想在这里更详细地充实答案。

我在使用 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 中声明一条错误消息。

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

How to use custom validators of github.com/1000hz/bootstrap-validator

javascript

plugins

custom-validators