html5表單驗證

Question

html5中那些原生的驗證，如required、pattern等，在驗證無效時，那些彈出的提示框是怎麼實現的？為什麼當因為不同的約束條件不滿足而無效時，會跳出不同內容的提示框？是不是結合invalid事件和validity屬性實現的？ setCustomValidity()方法的工作原理是什麼？感覺這塊內容越看越亂，還請大牛指教…

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個數字，在點擊提交按鈕的時候，就會提出提示