HTML 验证 : Using element. validity.typeMismatch 和 element.validity.tooLong

Question

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

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

第一个问题是 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 交互时，该值似乎never 设置为 true，因为您永远无法输入一个值长于* maxlength 的值。此外，即使您可以设置一个长于 maxlength DOM 的值，element.validity.tooLong 同样，永远不会设置为 true。所以我想知道，如果这个属性或多或少没有用，为什么它仍然存在。

目前，HTML 验证预期如何在这些约束条件下运行？如果浏览器不允许您输入无效值，怎么会针对这些约束违规生成错误消息？

Answer 1

我能够找到关于此事的更多说明。两者 W3C和 WHATWG说:

typeMismatch

The control is suffering from a type mismatch.

[...]

Suffering from a type mismatch

When a control that allows arbitrary user input has a value that is not in the correct syntax (E-mail, URL).

因此看起来只有在 type 被设置为 url 或 email 的情况下才会设置此值。在所有其他情况下，它不会被设置，因为 input 元素不允许用户将它们的值设置为无效值(手动或编程)。

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