forms - 在基础 6 中自定义来自 Abide 的错误消息

Question

我有一个简单的注册表单，其中包含一个为电子邮件设置的输入标签。我正在使用 abide 来验证电子邮件。那行得通，但我想创建自己的错误消息并在我选择的页面上设置元素样式。这可能吗？

我发现这个我知道没有验证电子邮件输入（我似乎找不到遵守用于验证电子邮件的代码）

    abide: {
    validators: {
        myCustomValidator: function (el, required, parent) {
            if (el.value.length <= 3) {
                document.getElementById('nameError').innerText = "Name must have more than 3 characters";
                return false;
            } //other rules can go here
            return true;
        }
    }

我假设如果我能够设置一个自定义验证器来模仿 abidie 已经做过的事情（电子邮件验证），那么当验证返回 false 时，我可以更改页面上我想要的所有元素。

Answer 1

我不确定您到底要什么，但请查看文档http://foundation.zurb.com/sites/docs/abide.html

所以现在在 Foundation 6 中有点不同。一旦你启动 Foundation，你将不得不覆盖 Foundation.Abide 对象中的某些属性。像这样：

Foundation.Abide.defaults.patterns['dashes_only'] = /^[0-9-]*$/;
Foundation.Abide.defaults.validators['myCustomValidator'] = function($el,required,parent) {
     if ($el.value.length <= 3) {
            document.getElementById('nameError').innerText = "Name must have more than 3 characters";
            return false;
        } //other rules can go here
        return true;
  };

然后在您的表单中的标记中会是这样的：

<input id="phone" type="text" pattern="dashes_only" required ><span class="form-error">Yo, you had better fill this out.</span>
<input id="max" type="number" data-validator="myCustomValidator" required><span class="form-error">Yo, you had better fill this out.</span>

您可以自定义跨度标签中的错误消息。