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

9
根据文档,您可以添加自定义验证器并运行它们。验证器应该是一个函数,接收jQuery元素作为参数,并根据输入的有效性返回真或假值。对象结构如下:{foo: function($el) { return true || false } }。将验证器添加到输入中的方法与其他项一样,使用data-foo="bar"。同时,您还必须通过错误选项添加任何自定义验证器的默认错误消息。我不太理解如何定义自己的自定义验证器以及如何在此插件中使用它。请问是否可以给出一个简单的示例或提示?
3个回答

12

您需要手动调用插件,因为custom选项不会与data属性一起使用:

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

然后像这样使用:

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

不要忘记添加错误消息,查看代码


请注意,自定义 data-* 名称必须全部小写,否则您的函数将无法在 jQuery 1.4+ 中运行。 - devXen
我们需要明确将其设置为表单元素:$("#myForm").validator(...); - AppsolutEinfach
5
错误选项不再使用。如果字段无效,验证函数应返回错误消息。 - Yannick
这个代码在表单加载时运行,甚至在按下提交按钮之前就已经运行了。这是设计如此还是我犯了一个错误? - Web Assistant

6

我希望在这里详细说明一下答案。

在使用数据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="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]
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接