前端的童鞋在寫頁面時, 都不可避免的總會踩到表單驗證這個坑. 這時候, 我們就要跪了, 因為要寫一堆js來檢查. 但是自從h5出現後, 很多常見的表達驗證, 它都已經幫我們實現了, 讓我們減輕了很多負擔, 就好像下面的:
郵箱位址驗證:
h5自身支援的, 但是我們要驗證的場景和情況是多種多樣的, 那該怎麼辦? 用回js嗎? 很明顯沒這麼蛋疼, 因為h5提供了pattern屬性, 讓我們自食其力! 我們可以在pattern指定正規表示式, 只要正則寫的好, 驗證就沒煩惱!
正則限定11位數字:
pattern的功勞. 但是不知道大家發現了乙個蛋疼的現象沒? 就是如果咱們使用pattern的方式去驗證表單, 在驗證失敗時, 它的提示都是請與所請求的格式保持一致, 我的天, 我們的使用者怎麼知道所請求的格式是什麼鬼, 總不能讓他們去看原始碼吧, 要真這樣, 我們連頁面都不用寫了, 直接讓他們把錢給我們得了, 開個玩笑~
有問題, 咱們就得解決, 在面向谷歌程式設計許久, 終於覓得一良方:
原來可以通過oninvalid和setcustomvalidity來自定義提示, 那這就好辦了, 修改源**如下:
終於不是那個蛋疼的"格式"了, 現在表單驗證提示已經很明確的告訴我們, 這裡應該輸入的是什麼樣的資料, 這樣使用者就能更好的修改自己的輸入了!
本文**於:猿2048
h5: 表單驗證失敗的提示語
原生h5表單驗證
近來做專案時發現h5表單驗證挺不錯的，畢竟原生的用起來比較方便簡單，在此做個總結 1.現在我們來簡單的實現乙個h5表單驗證 tip 在使用pattern時需要input不能為空，所以必須要用上required，否則pattern不會起作用。2.當然如果你想使用h5的表單驗證就必須使用submit來提...
手寫表單及h5表單驗證舉例
表單是乙個很重要的概念，這裡涉及到收集資料以及驗證資料，以及表單的使用者體驗。一般ui框架會有封裝好的這些功能。這裡複習一下手寫表單，順帶複習一下表單的基本屬性，基本樣式和h5的表單驗證。一般包含 label optional input,錯誤提示。錯誤提示的形式各式各樣，有h5自帶的樣式，也可以自...
H5表單屬性
form formaction formmethod placeholder autofocus list autocomplete list 指定文字框提供建議值的datalist元素，其值為datalist元素的id值。maxlength 設定文字框最大字元長度。pattern 用於輸入印證的正...