Javascript 未捕获类型错误：无法读取属性'；长度'；存在父项时的未定义的

好吧，看看这个

我正在编写一个表单验证脚本，并希望为此使用HTML5属性。我不确定这是否是最方便的方式（欢迎使用提示），但在这种情况下，我正在尝试获得允许的字符的最小数量和最大数量

如果您查看控制台，除了“uncaughttypeerror:cannotreadproperty'length'of undefined”错误之外，一切似乎都正常工作。这很奇怪，因为它甚至不是未定义的

这就解决了问题

我删除了周围的元素，现在它可以工作了，但没有任何错误

如何解决这个问题？还有更好的方法吗？（可能有点离题）

---

问候语

这是由于事件传播的原因，

keyup

事件被传播到

div

（由于选择器

：not（[type]）

）元素而被选中，其中没有

模式

属性。因此

pattern=将未定义.attr（'pattern'）

您需要调整

：not（[type]）

选择器，以仅选择不带

type

属性的输入元素。但是您可以将

[type=“text”]、：not（[type]）

选择器组合到

输入：text

此外，由于您只对具有

pattern

属性的元素感兴趣，因此也可以将其添加到选择器中

$('form.validation').find('input:text[pattern], input[type="email"][pattern], input[type="password"][pattern]').each(function () {
    $(this).on('keyup', function () {
        var that = $(this),
            pattern = that.attr('pattern');

        console.log(this, pattern)

        pattern_array = pattern.substr(2, pattern.length - 3).split(','),
        min_characters = pattern_array[0],
        max_characters = pattern_array[1];

        console.log(min_characters);
    });
});

---

演示：

您应该在此处包含代码谢谢：）节省了我很多时间！

<form class="validation">
    <input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" pattern=".{3,200}" title="3 to 200 characters" required="required">
</form>

$('form.validation').find('input:text[pattern], input[type="email"][pattern], input[type="password"][pattern]').each(function () {
    $(this).on('keyup', function () {
        var that = $(this),
            pattern = that.attr('pattern');

        console.log(this, pattern)

        pattern_array = pattern.substr(2, pattern.length - 3).split(','),
        min_characters = pattern_array[0],
        max_characters = pattern_array[1];

        console.log(min_characters);
    });
});