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. html5 - ElementUI table中el-table-column怎么設置百分比顯示。2. python - 使用readlines()方法讀取文件內容后,再用for循環遍歷文件與變量匹配時出現疑難?3. 對mysql某個字段監控的功能4. css3 - less或者scss 顏色計算的知識應該怎么學?或者在哪里學?5. 注冊賬戶文字不能左右分離6. javascript - table列過多,有什么插件可以提供列排序和選擇顯示列的功能7. css - 網頁div區塊 像蘋果一樣可左右滑動 手機與電腦8. javascript - 數組的過濾和渲染9. html - vue項目中用到了elementUI問題10. JavaScript事件
