問題描述

html5中那些原生的驗(yàn)證，如required、pattern等，在驗(yàn)證無效時(shí)，那些彈出的提示框是怎么實(shí)現(xiàn)的？為什么當(dāng)因?yàn)椴煌募s束條件不滿足而無效時(shí)，會(huì)彈出不同內(nèi)容的提示框？是不是結(jié)合invalid事件和validity屬性實(shí)現(xiàn)的？setCustomValidity()方法的工作原理是什么？感覺這塊內(nèi)容越看越亂，還請(qǐng)大牛指教……

問題解答

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

required:空白驗(yàn)證，比如說：

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

如果input[type=text]的value為空，就會(huì)彈出提示框，并且阻止表單提交；pattern:匹配正則表達(dá)式，比如說：

<form> <input type='text' pattern='[0-9]{3}' oninvalid='setCustomValidity(’請(qǐng)輸入3個(gè)數(shù)字！’)' oninput=(’setCustomValidity()’)> <input type='submit' value='提交'></form>

如若input[type=text]的value不為3個(gè)數(shù)字，在點(diǎn)擊提交按鈕的時(shí)候，就會(huì)提出提示