5

我有一个我创建的Javascript 验证框架，我正在尝试向它添加 HTML5 验证。在我的框架中，验证是通过使用data-属性将验证约束绑定到元素来完成的。这有点类似于使用 、 、 等属性进行 HTML5 验证required的min方式max。

我现在有两个问题。好吧，它们可能不一定是问题，但我想更好地了解情况，以便我可以决定如何前进。

我遇到的第一个问题，如果元素的值与元素的类型不匹配element.validity.typeMismatch，则设置为。true例如，如果您的元素的 URL 值无效，type="url"或者元素的电子邮件无效type="email"。但是，这种行为对于type="number". 行为不一致的原因是浏览器不允许您向inputwith添加无效值type="number"（通过 UI 甚至通过 DOM）。因此，element.validity.typeMismatch永远不会设置为true并且element.checkValidity()总是返回true。此行为与您可以在type="url"其中type="email"输入无效值的行为不一致，element.validity.typeMismatch并且element.checkValidity()返回预期值。

我在使用maxlength. 有一个ValidityState名为tooLongat的属性element.validity.tooLong。当直接从浏览器与 an 交互时，这个值似乎永远不会设置为，因为您永远不能输入比 * 值更长的值。此外，即使您可以设置比DOM更长的值，也永远不会设置为. 所以我想知道如果这个属性或多或少没用，为什么它仍然存在。trueinputmaxlength maxlength element.validity.tooLongtrue

目前，HTML5 验证在这些约束下的表现如何？如果浏览器不允许您输入无效值，如何为这些约束违规生成错误消息？

4

1 回答 1

3

我能够找到有关此问题的更多说明。W3C和WHATWG都说：

typeMismatch

控件存在类型不匹配。

[...]

遭受类型不匹配的困扰

当允许任意用户输入的控件具有不正确语法（电子邮件、URL）的值时。

所以看起来这个值只在type设置为urlor的情况下设置email。在所有其他情况下，它不会被设置，因为input元素不允许用户将其值设置为无效值（手动或编程）。

不幸的是，这并不能解决问题tooLong；规范说如果输入值太长，就会设置这个，但似乎不是这样。

于 2013-03-27T05:17:49.310 回答