Javascript更改值时未检查HTML输入有效性

Question

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

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？

Answer 1

使用pattern是解决我的问题的合理方法，所有功劳都归功于 Sujil 促使我准确了解这里发生的事情。我只是想为任何未来的读者澄清这个问题。

从规范minlength（强调我的）：

如果元素具有最小允许值长度，则其脏值标志为真，其值最后由用户编辑更改（与脚本所做的更改相反），其值不是空字符串，并且代码 -元素值的单位长度小于元素的最小允许值长度，则元素太短。

这种语言（“最后由用户编辑更改”）也在 maxlength 的规范中，但没有用于任何其他约束。这就是为什么没有“强制验证”的方法，因为除了这两个约束之外，所有的约束都一直在应用。我不知道为什么，但它非常清楚并且普遍实施。

Answer 2

在您的情况下，您需要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>