html5表單驗證
問題描述
html5中那些原生的驗證,如required、pattern等,在驗證無效時,那些彈出的提示框是怎么實現的?為什么當因為不同的約束條件不滿足而無效時,會彈出不同內容的提示框?是不是結合invalid事件和validity屬性實現的?setCustomValidity()方法的工作原理是什么?感覺這塊內容越看越亂,還請大牛指教……
問題解答
回答1:去看MDN上的表單驗證吧,我覺得說的還是挺清楚的,你可以按照它給的小demo一點點擼,慢慢就明白了。
回答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個數字,在點擊提交按鈕的時候,就會提出提示
相關文章:
1. docker - 如何修改運行中容器的配置2. javascript - log4js的使用問題3. angular.js - angular ng-class里面的引號問題4. javascript - Web微信聊天輸入框解決方案5. javascript - 移動端textarea不能上下滑動,該怎么解決?6. javascript - 為什么這個點擊事件需要點擊兩次才有效果7. css - 對于類選擇器使用的問題8. javascript - 音頻加載問題9. javascript - Ajax加載Json時,移動端頁面向左上角縮小一截兒,加載完成后才正常顯示,這該如何解決?10. javascript - 有沒有什么好的圖片懶加載的插件,需要包含監聽頁面滾動高度,然后再加載的功能
