javascript - Foundation Abide/AngularJS 中单个输入的不同错误

Question

我正在尝试使用 Foundation 设置一个表单，但我发现除了基本的错误检查之外很难做更多的事情。假设我有以下输入字段:

<input pattern="username" required type="text" placeholder="username" />

假设用户名正则表达式是一个自定义模式，大致如下:

^[A-Za-z]{3,6}$

我需要做的是根据输入字段中的字符串是否高于或低于该字符限制来显示不同的错误。据我所知，Abide 基金会对此有疑问。我找不到任何文档表明这是可能的。

另一方面，我在同一应用程序中可以使用 AngularJS，理论上可以使用 ng-min/ng-max 指令，并根据该指令切换错误情况。然而，我的理解是，Foundation 和 Angular 并不能很好地配合，这可能会导致框架之间的通信出现一些问题。业务需求表明我需要在 Foundation 中尝试尽可能多地执行此操作，但如果我可以提供一个很好的案例来说明为什么 Foundation 不适合，那么就会有回旋余地。

有没有办法纯粹在 Foundation 中做我需要的事情？混合 Angular 和 Foundation 验证是很容易完成的事情，还是我会遇到 Angular 的 $digest 循环的问题？

Answer 1

您应该能够使用 Foundation 来完成此操作。 Abide 允许您在基础初始化时创建自己的自定义验证函数。在该验证器中，您可以使用 DOM 操作来调整错误消息的内部文本。您的初始化将如下所示:

$(document).foundation({
     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;
                } else if (el.value.length >= 9) {
                    document.getElementById('nameError').innerText = "Name must have less than 9 characters";
                    return false;
                } //other rules can go here
                return true;
            }
        }
    }
});

然后您可以在标签中使用此验证器，如下所示:

 <form data-abide>
    <div class="name-field">
        <label>
            Email <small>required</small>
            <input type="text" data-abide-validator="myCustomValidator">
        </label>
        <small id="nameError" class="error">An email address is required.</small>
    </div>
    <button type="submit">Submit</button>
 </form>