Javascript html设置CustomValidity oninvalid和oninput解释

因此，如果没有oninput=setCustomValidity部分，无论输入是什么，表单都不会提交，因为它总是显示“必须超过5个字符”错误，但是使用oninput=setCustomValidity，一切都很好，但是我似乎不明白oninvalid和oninput是如何协同工作的，如果我将自定义有效性设置为on input，那么用户每次按键时如何不覆盖oninvalid部分？

---

我认为这与setCustomValidity的工作原理有关，不是吗？

输入超过5个字符，然后单击submit，就可以了。它不仅适用于无效事件至少触发一次的情况

<form method="post" action="#">
<input type="text" pattern=".{5,}" name="el" oninvalid="setCustomValidity('Must Be Longer Than 5 Characters')" oninput="setCustomValidity('')"/>
<input type="submit"/>
</form>

一些基础知识，参考： 当约束不满足时触发。 方法用于设置验证结果；空字符串表示满足约束，任何其他字符串表示存在错误

原因: -触发oninvalid事件后，使用setCustomValidity将结果设置为非空字符串。 -现在，即使在更改输入值后，模式条件得到满足，验证的结果仍然是一个非空字符串。

---

-在您的代码oninvalid=setCustomValidity'…'oninput=setCustomValidity中，您可以在每次输入后清除结果。

输入超过5个字符，然后单击“提交”，这样就可以了。它不仅适用于无效事件至少触发一次的情况

<form method="post" action="#">
<input type="text" pattern=".{5,}" name="el" oninvalid="setCustomValidity('Must Be Longer Than 5 Characters')" oninput="setCustomValidity('')"/>
<input type="submit"/>
</form>

一些基础知识，参考： 当约束不满足时触发。 方法用于设置验证结果；空字符串表示满足约束，任何其他字符串表示存在错误

原因: -触发oninvalid事件后，使用setCustomValidity将结果设置为非空字符串。 -现在，即使在更改输入值后，模式条件得到满足，验证的结果仍然是一个非空字符串。 -在代码oninvalid=setCustomValidity'…'oninput=setCustomValidity中，您可以在每次输入后清除结果