javascript - html setCustomValidity oninvalid 和 oninput 解释

Question

<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>

因此，如果没有 oninput="setCustomValidity('')" 部分，无论输入如何，表单都不会提交，因为它始终会显示“必须长于 5 个字符”错误，但是通过使用 oninput="setCustomValidity('')" 一切正常，但是如果我将自定义有效性设置为 '，我似乎不明白 oninvalid 和 oninput 如何协同工作' 输入时，oninvalid 部分如何在用户每次按键时不被覆盖？
我认为这与 setCustomValidity() 的工作原理有关，不是吗？

Answer 1

输入5个以上字符，然后点击提交即可。它仅在无效事件至少被触发一次的情况下才起作用。

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

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

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