javascript 如何使用 github.com/1000hz/bootstrap-validator 的自定义验证器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29759459/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use custom validators of github.com/1000hz/bootstrap-validator
提问by leo
From the documentation http://1000hz.github.io/bootstrap-validator/:
从文档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.
添加要运行的自定义验证器。验证器应该是接收 jQuery 元素作为参数并根据输入的有效性返回真值或假值的函数。
对象结构为：
{foo: function($el) { return true || false } }将验证器添加到输入就像其他人一样，
data-foo="bar".您还必须通过错误选项为任何自定义验证器添加默认错误消息。
I don't quite understand how to define my own custom validator and how to use it with this plugin.
我不太明白如何定义我自己的自定义验证器以及如何将它与这个插件一起使用。
Could anyone give me a simple example or hint?
谁能给我一个简单的例子或提示？
回答by julesbou
You need to call your plugin manually, as customoptions will not work with data-attributes:
您需要手动调用您的插件，因为custom选项不适用于数据属性：
$().validator({
custom: {
'odd': function($el) { return Boolean($el.val() % 2);}
}
})
then use it like this:
然后像这样使用它：
<input placeholder="plz enter odd value" data-odd>
Don't forget to add error messages, see code
不要忘记添加错误信息，查看代码
回答by Chris Brewer
I wanted to flesh out the answers here with a bit more detail.
我想更详细地充实这里的答案。
I was attempting to do this while using the data-api (putting data-toggle="validator"in the form tag). Removing that from my <form>tag and enabling it with Javascript, my custom function works:
我试图在使用 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!"
}
});
I also had to add a value to the data-odd attribute thusly:
因此，我还必须为 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>
Interesting to note that if I add the following to the <input>element, it takes precedence over the error message declared in javascript:
有趣的是，如果我将以下内容添加到<input>元素中，它会优先于 javascript 中声明的错误消息：
data-odd-error="Not an odd number, yo!"
However, I get an error in console if I only use the data-odd-error attribute but NO error message specified in Javascript. Thus, you mustdeclare an error message in Javascript.
但是，如果我只使用 data-odd-error 属性但没有在 Javascript 中指定错误消息，我会在控制台中收到错误消息。因此，您必须在 Javascript 中声明错误消息。
回答by omrim
First of all add your own custom validator, for example:
首先添加您自己的自定义验证器，例如：
var validatorOptions = {
delay: 100,
custom: {
unique: function ($el) {
var newDevice = $el.val().trim();
return isUniqueDevice(newDevice)
}
},
errors: {
unique: "This Device is already exist"
}
}
Second, you need to "bind" the form input for the custom validator, for example:
其次，您需要“绑定”自定义验证器的表单输入，例如：
<input id="add_new_device_input" class="form-control" data-unique="unique">
If you want to add to this input more validators error you must to add the custom error to the input: data-unique-error="This device is already exist" for example:
如果要向此输入添加更多验证器错误，则必须向输入添加自定义错误：data-unique-error="This device is already existing" 例如：
<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>">
The "data-error" is the default validator error and it called "native" key, the following code will demonstrate how the validator print the error messages according to the validator key:
“data-error”是默认验证器错误，它称为“native”键，以下代码将演示验证器如何根据验证器键打印错误消息：
function getErrorMessage(key) {
return $el.data(key + '-error')
|| $el.data('error')
|| key == 'native' && $el[0].validationMessage
|| options.errors[key]
}
