时间戳

首页 > 解决方案 > 即使违反 minlength，HTML 输入 checkValidity() 也始终返回 true

html - 即使违反 minlength，HTML 输入 checkValidity() 也始终返回 true

问题描述

非常简单的设置：

<input id="Input" type="text" minlength="8" required />
<script>
    const input = window.document.getElementById('Input');
    input.value = "foobar"
    console.log(input.checkValidity());
</script>

以下返回true应该是false. 见https://jsbin.com/huqowesewu/edit?html，输出

这到底是为什么？输入的长度为6，小于8，所以应该是无效的。但事实并非如此。这个属性坏了吗？还是checkValidity()坏了？至少可以说我很困惑。

标签： html

解决方案

这应该有效。根据 WHATWG，它应该可以工作。根据 caniuse.com 它应该可以工作。

但是，它似乎仅在用户编辑值时才有效，而不是从 JavaScript 设置。我在 WHATWG 或 MDN 上没有找到任何关于这种行为的信息（也许它就在那里，我不知道去哪里找）。

它记录在 WHATWG 上。两者都minlength需要maxlength用户交互。更准确地说，当用户修改输入值时，会设置一个“脏值标志”，在验证时会考虑到这一点。请参阅限制用户输入长度：maxlength 属性：

约束验证：如果元素具有最小允许值长度，其脏值标志为真，其值最后由用户编辑更改（与脚本所做的更改相反），其值不是空字符串，并且元素的 API 值的长度小于该元素的最小允许值长度，则表示该元素过短。

我测试过但没有成功的事情：监听"invalid"事件。触发"input"事件。在检查之前从inputwith中移除焦点。blur()从queueMicrotask(function). 从requestAnimationFrame(function). 从 double 检查requestAnimationFrame(function)。检查一个有效值，然后检查一个无效值。通过 HTML 属性设置有效或非空的无效默认值。setAttribute使用from JavaScript设置值。设置defaultValue。

我在 Chromium Edge 和 Firefox 上进行了测试。

我还发现了如何在以编程方式设置字段时触发最小长度验证的问题？这没有提供解决方案。

无论如何，您可以使用pattern来模拟此验证约束。是的，它会像大多数验证约束一样正确地从 JavaScript 触发。见https://stackoverflow.com/a/10294291/402022

推荐阅读