H5 表單驗證失敗的提示語

2022-08-05 16:45:21 字數 994 閱讀 6826

前端的童鞋在寫頁面時, 都不可避免的總會踩到表單驗證這個坑. 這時候, 我們就要跪了, 因為要寫一堆js來檢查. 但是自從h5出現後, 很多常見的表達驗證, 它都已經幫我們實現了, 讓我們減輕了很多負擔, 就好像下面的:

郵箱地址驗證:

郵箱驗證是h5自身支援的, 但是我們要驗證的場景和情況是多種多樣的, 那該怎麼辦? 用回js嗎? 很明顯沒這麼蛋疼, 因為h5提供了pattern屬性, 讓我們自食其力! 我們可以在pattern指定正規表示式, 只要正則寫的好, 驗證就沒煩惱!

正則限定11位數字:

大家可以嘗試下, 在輸入非11位的數字, 都會報錯, 這就是pattern的功勞. 但是不知道大家發現了一個蛋疼的現象沒? 就是如果咱們使用pattern的方式去驗證表單, 在驗證失敗時, 它的提示都是請與所請求的格式保持一致, 我的天, 我們的使用者怎麼知道所請求的格式是什麼鬼, 總不能讓他們去看原始碼吧, 要真這樣, 我們連頁面都不用寫了, 直接讓他們把錢給我們得了, 開個玩笑~

有問題, 咱們就得解決, 在面向谷歌程式設計許久, 終於覓得一良方:

原來可以通過oninvalidsetcustomvalidity來自定義提示, 那這就好辦了, 修改源**如下:

結果:

終於不是那個蛋疼的"格式"了, 現在表單驗證提示已經很明確的告訴我們, 這裡應該輸入的是什麼樣的資料, 這樣使用者就能更好的修改自己的輸入了!

本文**於:猿2048

h5: 表單驗證失敗的提示語

H5的Page Visibility API

哈哈,又學了一個h5的api。今天突然對動態獲取網頁的選中狀態很感興趣,然後去查了下,發現真的有個api控制它 page visibilit...

H5的本地儲存

localstorage 本地儲存 可以長期儲存資料,沒有時間限制,一天,一年,兩年甚至更長,資料都可以使用。sessionstorage 會話儲存 ,只有在瀏覽器被關閉之前使用,建立另一個頁面時同意可以使用,關閉瀏覽器之後資料就會消失。 html5 的本地儲存 api 中的 localstorag...

H5 API plusready的相容

android平臺提前注入5 api,支援在plusready事件前呼叫 在5 runtime環境中,通常情況下需要html頁面解析完成後才會注入5 api,執行的順序為 1 載入html頁面 3 觸發domcontentloaded事件 4 注入5 api 5 觸發plusready事件 這樣導致...