Question

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

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

假设用户名正则表达式是一个自定义模式：

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

我需要做的是显示不同的错误，具体取决于输入字段中的字符串是高于还是低于该字符限制。据我所知，基金会Abide对此有疑问。我找不到任何文件，甚至暗示这是可能的。

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

有没有办法纯粹在基金会做我需要的东西？将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>

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

1 个答案: