让我展示一些示例，以便您清楚地理解问题。
✔️ 示例 1：按预期工作
考虑一个输入<input required />和一些 CSS 来可视化他的有效性。
console.log( document.querySelector('input').checkValidity() )input:invalid { background: pink; }<input required />如果我们通过 Javascript 检查它的有效性状态，inputEl.checkValidity()我们会得到一个，在节目中false进一步查看inputEl.validity{ valueMissing: true, typeMismatch: false, …}
好的，现在一切都是逻辑。
✔️ 示例 2：按预期工作
现在，如果我们向输入添加一个值，验证应该没问题：
console.log( document.querySelector('input').checkValidity() )input:invalid { background: pink; }<input required value="John Cena" />如果我们通过 Javascript 检查它的有效性状态，inputEl.checkValidity()我们会得到一个true.
说得通。
❌ 示例 3：未按预期工作
让我们添加maxlength="5"：
console.log( document.querySelector('input').checkValidity() )input:invalid { background: pink; }<input required value="John Cena" maxlength="5" />为什么该字段最初不是无效的？
如果我们通过 Javascript 检查它的有效性状态，inputEl.checkValidity()我们会得到一个true...？
此外，如果我们编辑此输入，则验证将被更新，并且该字段将被标记为无效。