HTML5 验证：使用 element.validity.typeMismatch 和 element.validity.tooLong

Question

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

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

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

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

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

Answer 1

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

typeMismatch

控件的类型不匹配。

[...]

类型不匹配

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

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

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