javascript - checkValidity/reportVality 不适用于通过代码设置的值

Question

如果通过 JavaScript 设置值，HTML5 checkValidity()/reportValidity() 方法似乎不起作用。

考虑这个例子(JSFiddle):

<input id="text-field" maxlength="3" placeholder="Max len: 3 chars" />
<button id="set-field-value">Set</button>
<button id="check-valid">Is valid?</button>
<script>
window.onload = function() {
    var textField = document.getElementById('text-field');
    document.getElementById('set-field-value').onclick = function() {
        textField.value = 'This is a very looooooooooooooooooooooooooooooong text';
    };
    document.getElementById('check-valid').onclick = function() {
        window.alert(textField.checkValidity());
    };
};
</script>

如果单击Set按钮，输入字段的值将设置为无效值(长度大于3个字符)，但checkValidity() 方法仍然表明输入有效(在 Chrome、Edge 和 Firefox 上检查)。

为什么？有没有办法确定该字段是否有效，即使其值是通过代码设置的？

Answer 1

我对此进行了一段时间的调查。看来你至少缺少 <form>包装输入+按钮内容。

但是，即使我尝试设置输入字段 required ，ValidityObject 仍然不会注意到超出了长度。

作为一种半解决方法，我想到了使用 pattern属性:

<input id='textfield' pattern='\S{0,3}'>

(= \S 代表“除空格外的所有字符”)

这至少可以防止超过三个字符的内容。另外，您还可以拥有setCustomValidity无效案例的消息。

请参阅工作示例:https://codepen.io/zvona/pen/rNavqxP?editors=1010