javascript 未捕获的类型错误：当有父级时，无法读取未定义的属性“长度”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19461114/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: Cannot read property 'length' of undefined when there is a parent
提问by Maarten de Graaf
Alright, so check this out
好的，所以看看这个
<form class="validation">
<div>
<input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" pattern=".{3,200}" title="3 to 200 characters" required="required">
</div>
</form>
I'm working on a form validation script and want to use the HTML5 attributes for this. I'm not sure if this is the most handy way (tips are welcome) but in this case I'm trying to get the minimum amount and maximum amount of allowed characters.
我正在编写表单验证脚本，并希望为此使用 HTML5 属性。我不确定这是否是最方便的方式（欢迎提供提示），但在这种情况下，我试图获得允许字符的最小数量和最大数量。
If you look at the console, everything seems to work fine apart from the "Uncaught TypeError: Cannot read property 'length' of undefined" error. It is strange since it isn't even undefined.
如果您查看控制台，除了“未捕获的类型错误：无法读取未定义的属性‘长度’”错误之外，一切似乎都正常。这很奇怪，因为它甚至不是未定义的。
So this fixes it http://jsfiddle.net/J9Tza/1/
所以这修复了它http://jsfiddle.net/J9Tza/1/
<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>
I removed the surrounding element and now it works but without any errors.
我删除了周围的元素，现在它可以工作但没有任何错误。
How to fix this? And is there a better way to do this? (might be a bit off-topic)
如何解决这个问题？有没有更好的方法来做到这一点？（可能有点跑题）
Greetings
问候
回答by Arun P Johny
it is because of event propagation, the keyupevent is propagated to the div(which is selected because of the selector :not([type])) element where there is no patternattribute. So pattern = that.attr('pattern')will be undefined
正是因为事件传播，keyup事件被传播到没有属性的div（因为选择器而被选中:not([type])）元素pattern。所以pattern = that.attr('pattern')将是未定义的
You need to tweak the :not([type])selector to select only input elements without typeattribute. But you can combine the [type="text"], :not([type])selectors to input:text.
您需要调整:not([type])选择器以仅选择没有type属性的输入元素。但是您可以将[type="text"], :not([type])选择器组合到input:text.
Also since you are interested in only elements with patternattribute you can add it also to the selector
此外，由于您只对具有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);
});
});
Demo: Fiddle
演示：小提琴
