javascript - html setCustomValidity oninvalid和oninput说明

<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()的工作方式有关，不？

最佳答案

输入超过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('')"中，每次输入后清除结果。

关于javascript - html setCustomValidity oninvalid和oninput说明，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39514306/