html5表單驗(yàn)證
問題描述
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)大牛指教……
問題解答
回答1:去看MDN上的表單驗(yàn)證吧,我覺得說的還是挺清楚的,你可以按照它給的小demo一點(diǎn)點(diǎn)擼,慢慢就明白了。
回答2: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ì)提出提示
相關(guān)文章:
1. docker - 如何修改運(yùn)行中容器的配置2. javascript - Web微信聊天輸入框解決方案3. 請(qǐng)教各位大佬,瀏覽器點(diǎn) 提交實(shí)例為什么沒有反應(yīng)4. docker images顯示的鏡像過多,狗眼被亮瞎了,怎么辦?5. javascript - 關(guān)于audio標(biāo)簽暫停的問題6. javascript - history.replaceState()無法改變query參數(shù)7. javascript - 移動(dòng)端textarea不能上下滑動(dòng),該怎么解決?8. javascript - 為什么form表單提交沒有跨域問題,但ajax提交有跨域問題?9. javascript - Ajax加載Json時(shí),移動(dòng)端頁面向左上角縮小一截兒,加載完成后才正常顯示,這該如何解決?10. javascript - 音頻加載問題
