1

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

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

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

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

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

另一方面，我在同一个应用程序中可以使用 AngularJS，理论上可以使用 ng-min / ng-max 指令，并以此为基础切换错误情况。然而，我的理解是 Foundation 和 Angular 并不能很好地相互配合，这可能会引入一些框架之间的通信问题。业务需求表明我需要在 Foundation 中尝试并尽可能多地做这件事，但如果我能提供一个很好的案例说明为什么 Foundation 不适合，那么会有余地。

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

4

1 回答 1

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>
于 2014-06-10T20:34:57.943 回答