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

Question

我有一个我创建的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。似乎在直接从浏览器与 a 交互时从未设置此值，因为您永远不能输入比 * 值更长的值。此外，尽管你可以设置一个值是长于从DOM，再次，是从来没有设置。所以我想知道如果这个属性或多或少没用，为什么它甚至存在。trueinputmaxlength maxlength element.validity.tooLongtrue

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

Answer 1

我能够找到有关此事的更多说明。W3C和WHATWG均表示：

typeMismatch

该控件存在类型不匹配的问题。

[...]

遭受类型不匹配的困扰

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

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

不幸的是，这并不能回答问题tooLong；规范说，如果输入值太长，则会设置此值，但情况似乎并非如此。