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>

（NB：stacksnippets.net似乎现在不可用，但以上内容说明了我的问题。）

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

Answer 1

在这种情况下，您需要在输入元素中使用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>

Answer 2

使用pattern是解决我的问题的一种合理方法，这一切归功于Sujil促使我准确了解这里发生的一切。我只是想为以后的读者澄清这个问题。

来自the spec for minlength（重点是我）：

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

该语言（“最后一次由用户编辑更改”）也在maxlength规范中，但没有任何其他限制。这就是为什么没有“强制验证”的方法的原因，因为所有约束都一直应用，除了这两个约束。我不确定为什么，但是它很清楚并且已被普遍实现。

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

2 个答案: