不同的错误在基金会恪守单一的输入/ AngularJS(Different errors for a

2019-10-20 06:51发布

我试图建立与基金会的形式,我发现很难做的比基本的错误检查更多。 可以说我有以下输入字段:

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

如果用户名正则表达式是一个自定义模式的东西沿着这行:

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

我需要能够做的是根据显示在输入字段中的字符串是否高于或低于该字符的限制不同的错误。 至于我可以告诉基金会恪守有问题,与此有关。 我无法找到,即使表明这是可能的任何文件。

在另一方面,我也有同样的应用程序中提供AngularJS,并且理论上可以用NG分钟/ NG-MAX的指令,并基于交换机关闭该错误情况。 然而,我的理解是,基金会和角度不完全发挥好彼此,这可能会产生一些问题框架之间的通信。 业务需求的状态,我需要尝试做尽可能多的在此基础越好,但如果我可以提供一个很好的例子,为什么基金不适合那么就不会有余地。

有没有办法做我需要纯粹是基金会? 是混合角和基金会验证的东西,是很容易做到,还是我要运行与角的$消化周期的问题?

Answer 1:

您应该能够通过基金会来做到这一点。 恪守可让您在基础初始化创建自己的自定义验证函数。 在验证你可以使用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>


文章来源: Different errors for a single input in Foundation Abide / AngularJS