Javascript checkValidity/ReportValidity不适用于通过代码设置的值

如果通过JavaScript设置值，HTML5

checkValidity（）

/

reportValidity（）

方法似乎不起作用

考虑这个例子（）：

设置
有效吗？
window.onload=函数（）{
var textField=document.getElementById（'text-field'）；
document.getElementById（'set-field-value'）。onclick=function（）{
textField.value='这是一个非常冗长的文本'；
};
document.getElementById（'check-valid'）。onclick=function（）{
window.alert（textField.checkValidity（））；
};
};

如果单击

Set

按钮，则输入字段的值设置为无效值（其长度大于3个字符），但

checkValidity（）

方法仍然表示输入有效（在Chrome、Edge和Firefox上检查）

---

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

您应该检查表单是否有效，而不是输入。但是，

maxLength

属性似乎根本不是触发验证的东西

如果要检查输入文本的长度，可以使用以下方法：

window.onload=function（）{
var textField=document.getElementById（'text-field'）；
document.getElementById（'set-field-value'）。onclick=function（）{textField.value='ab'；}；
document.getElementById（'check-valid'）。onclick=function（）{
if（textField.value&&//if存在且
textField.value.length>2&&//如果值至少有3个字符
textField.value.trim（）.length>2//如果值不只是空格
){alert（'input OK'）；}//提醒输入OK
else{alert（'请至少插入3个字符'）；}//else警报错误
};
};

设置
有效吗？
我调查了一会儿。似乎您至少缺少了包装输入+按钮内容的

但是，即使我尝试设置输入字段
必需
，仍然ValidityObject不会注意到长度被超过

作为一种半解决方法，我想到了使用
模式
属性：

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



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

这至少可以防止内容超过三个字符。此外，对于无效案例，您可以使用
setCustomValidity
消息

请参阅位于的工作示例：
我尝试了一些方法，使我了解checkValidity不会检查值本身

当我点击#检查有效性时，我得到：

textField.validity.tooLong // false
textField.validity.valid // true
textField.value // This is a very looooooooooooooooooooooooooooooong text

当我在输入中键入自己时，我的浏览器不允许我键入超过3个字符

为什么?

确切地说，我不知道，但是有一篇很棒的文章值得一看

是否有方法确定字段是否有效，即使其值为
通过代码设置

返回您的字符串，然后您可以访问它的长度。在这种情况下，我无论如何都会选择这种方式

const tooLong = textField.value.length > 3;
if (tooLong) window.alert('Something');

我希望有帮助
 这回答了你的问题吗@A.Meshu究竟应该如何回答HTML5验证未按预期工作的具体问题？如果您阅读此线程（），您将看到您需要检查表单，而不是输入本身。我在写下我的答案后遇到了它，但我认为这就是你问题的答案。正如我们两人所看到的-我错了。。。
const tooLong = textField.value.length > 3;
if (tooLong) window.alert('Something');