javascript - 通过Javascript更改值时未检查HTML输入有效性

我有一个定义了minlength的文本输入。用户输入文本时，输入的validity状态将立即更新。如果更改代码中的值，则有效性状态将重置为显示为有效-即使违反了约束，validity.valid也为true。

const input = document.getElementById("input");
const label = document.getElementById("label");
document.getElementById("rightButton").addEventListener("click", evt => {
  input.value = "ABCDE";
});
document.getElementById("wrongButton").addEventListener("click", evt => {
  input.value = "AB";
});

setInterval(() => label.innerHTML = input.validity.valid, 250);

<input type="text" id="input" minlength="4">
<span id="label"></span>
<hr/>
<button id="rightButton">Make It Right</button>
<button id="wrongButton">Make It Wrong</button>

分配给input.value时为什么不运行自动有效性检查？这是在某处记录的吗？我可以调用一种方法来触发浏览器的内部验证过程，而不必自己检查并调用setCustomValidity吗？

最佳答案

在您的情况下，您需要在输入元素中使用pattern。基本上，模式的内容是正则表达式。在下面的代码中，.{4,}表示验证3个或更多字符。

const input = document.getElementById("input");
const label = document.getElementById("label");
document.getElementById("rightButton").addEventListener("click", evt => {
  input.value = "ABCDE";
});
document.getElementById("wrongButton").addEventListener("click", evt => {
  input.value = "AB";
});

setInterval(() => label.innerHTML = input.validity.valid, 250);

<input type="text" pattern=".{4,}"  id="input">
<span id="label"></span>
<hr/>
<button id="rightButton">Make It Right</button>
<button id="wrongButton">Make It Wrong</button>