html5表單驗證

問題描述

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

問題解答

去看MDN上的表單驗證吧，我覺得說的還是挺清楚的，你可以按照它給的小demo一點點擼，慢慢就明白了。

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