HTML5-Formularvalidierung

Question

Wie implementiert man die nativen Verifizierungsfelder in HTML5, z. B. erforderlich, Muster usw., wenn die Verifizierung ungültig ist? Warum wird ein Eingabeaufforderungsfeld mit unterschiedlichem Inhalt angezeigt, wenn dieser ungültig ist, weil unterschiedliche Einschränkungen nicht erfüllt sind? Wird es durch die Kombination des ungültigen Ereignisses und des Gültigkeitsattributs implementiert? Wie funktioniert die setCustomValidity()-Methode? Ich habe das Gefühl, dass dieser Inhalt immer verwirrender wird, je mehr ich ihn lese, deshalb möchte ich einige Experten um Rat fragen...

Answer 1

去看MDN上的表单验证吧，我觉得说的还是挺清楚的，你可以按照它给的小demo一点点撸，慢慢就明白了。

Answer 2

required:空白验证，比如说：

<form>
    <input type="text" required oninvalid="setCustomValidity('此处不能为空！')" oninput=('setCustomValidity()')>
    <input type="submit" value="提交">
</form>

如果input[type=text]的value为空，就会弹出提示框，并且阻止表单提交；
pattern:匹配正则表达式，比如说：

<form>
    <input type="text" pattern="[0-9]{3}" oninvalid="setCustomValidity('请输入3个数字！')" oninput=('setCustomValidity()')>
    <input type="submit" value="提交">
</form>

如若input[type=text]的value不为3个数字，在点击提交按钮的时候，就会提出提示