如果通过 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 上检查)。
最佳答案
我对此进行了一段时间的调查。看来你至少缺少 <form>
包装输入+按钮内容。
但是,即使我尝试设置输入字段 required
,ValidityObject 仍然不会注意到超出了长度。
作为一种半解决方法,我想到了使用 pattern
属性:
<input id='textfield' pattern='\S{0,3}'>
(= \S 代表“除空格外的所有字符”)
这至少可以防止超过三个字符的内容。另外,您还可以拥有setCustomValidity
无效案例的消息。
关于javascript - checkValidity/reportVality 不适用于通过代码设置的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59680845/