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

【问题标题】：HTML input checkValidity() always returns true even with minlength violations即使违反 minlength，HTML 输入 checkValidity() 也始终返回 true
【发布时间】：2021-03-31 22:15:49
【问题描述】：

非常简单的设置：

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

当它应该是false 时，以下返回true。见https://jsbin.com/huqowesewu/edit?html,output

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

【问题讨论】：

标签： html

【解决方案1】：

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

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

它记录在 WHATWG 上。 minlength 和 maxlength 都需要用户交互。更准确地说，当用户修改输入值时，会设置一个“脏值标志”，在验证时会考虑到这一点。见Limiting user input length: the maxlength attribute：

约束验证：如果元素具有最小允许值长度，则其脏值标志为真，其值上次由用户编辑更改（相对于脚本所做的更改），它的值不是空字符串，并且元素的API值的长度小于元素的最小允许值长度，那么元素就太短了.

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

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

我还发现了How can I trigger the minlength validation when field is set programmatically?这个问题，它没有提供任何解决方案。

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

【讨论】：

啊，好吧，很高兴我没有做严重的错误。我遇到了pattern，我换了它，但我真的很想知道为什么这不起作用。不过，损坏的规格超出了我的控制范围。感谢您的所有时间。
@Devildude4427 找到并添加了规范。

【解决方案2】：

这是弄错的更好方法。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type="text" minlength="8" id="Input" required />
  <button onclick = "myfunction()">TRY</button>
  <p id="demo"></p>
  <script>

    function myfunction(){
      var iny = document.getElementById("Input");
       document.getElementById("demo").innerHTML = iny.checkValidity();
    }
    
  </script>
</body>
</html>

【讨论】：

当它应该返回 false 时，它仍然会返回 true。您所做的只是将控制台日志移动到 DOM 中。
把函数改成这个：function myfunction(){ var iny = document.getElementById("Input"); console.log(iny.checkValidity()); }
您忘记设置输入内容。您需要这样做，否则您的“解决方案”只是忽略了问题。
required 约束有效。问题在于minlength。当然，我们将它们一起使用，因为如果不需要输入，它不一定是有效的。重申一下，当input 为空时，我们会按预期得到false。 required 就足够了。但是当input 不为空，但它的内容比minlength 短时，我们得到true，这意味着minlength 没有被检查。在那种情况下，我们当然想要false。再次重申，当input 不为空且其内容短于minlength 时，我们希望false。