HTML输入checkValidity（）始终返回true，即使存在minlength冲突_Html

HTML输入checkValidity（）始终返回true，即使存在minlength冲突

html

HTML输入checkValidity（）始终返回true，即使存在minlength冲突,html,Html,设置非常简单： const input=window.document.getElementById（'input'）； input.value=“foobar” console.log（input.checkValidity（））；当它应该是false时，下面返回true。看这到底是为什么？输入的长度为6，小于8，因此应该是无效的。但事实并非如此。这个属性坏了吗？还是checkValidity（）已损坏？至少我很困惑。这应该行得通。按照WHATWG的要求，它应该能工作。根据canius

设置非常简单：


const input=window.document.getElementById（'input'）；
input.value=“foobar”
console.log（input.checkValidity（））；

当它应该是

false

时，下面返回

true

。看

这到底是为什么？输入的长度为6，小于8，因此应该是无效的。但事实并非如此。这个属性坏了吗？还是

checkValidity（）

已损坏？至少我很困惑。

这应该行得通。按照WHATWG的要求，它应该能工作。根据caniuse.com的说法，它应该可以工作

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

它记录在WHATWG上。

minlength

和

maxlength

都需要用户交互。更准确地说，当用户修改输入值时，将设置一个“脏值标志”，这将在验证中考虑。见：

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

我测试过但无法正常工作的事情：监听

无效的事件。触发“输入”
事件。检查前，使用blur（）
从输入中移除焦点。从队列微任务（函数）
检查。从requestAnimationFrame（函数）
检查。从doublerequestAnimationFrame（函数）
检查。使用有效值进行检查，然后使用无效值进行检查。通过HTML属性设置有效或非空的无效默认值。使用JavaScript中的setAttribute
设置值。设置defaultValue

我在Chromium Edge和Firefox上进行了测试
我还发现了一个无法解决的问题

无论如何，您可以使用模式
来模拟此验证约束。是的，这将正确地从JavaScript触发，就像大多数验证约束一样。请参见
这是获取错误信息的更好方法
<!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>


JS-Bin
尝试

函数myfunction（）{
var iny=document.getElementById（“输入”）；
document.getElementById（“demo”）.innerHTML=iny.checkValidity（）；
}
当它应该false
时仍将返回true
。您所做的只是将控制台日志移动到DOM中。将函数更改为：函数myfunction（）{var iny=document.getElementById（“输入”）；控制台.log（iny.checkValidity（））；}您忘记设置输入内容了。您需要这样做，否则您的“解决方案”就是忽略问题。required
约束有效。问题在于minlength
。当然，我们一起使用它们，因为如果输入不是必需的，它就不必是有效的。重申一下，当输入
为空时，我们会得到预期的false
。对于所需的，
就足够了。但是当输入
不是空的，但其内容小于minlength
时，我们得到true
，这意味着没有检查minlength
。在这种情况下，我们当然希望false
。再次重申，当输入
不为空且其内容短于minlength
时，我们需要false
。啊，好吧，很高兴我没有做可怕的错误。我遇到了我交换的模式
，但我真的想知道为什么这不起作用。不过，坏掉的规格是我无法控制的。谢谢您的时间。@Devildude4427找到并添加了规范。