您好,登錄后才能下訂單哦!
這篇文章主要介紹了H5表單驗(yàn)證失敗該如何提示,具有一定借鑒價(jià)值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
我們知道,前端的童鞋在寫頁面時(shí), 都不可避免的總會踩到 表單驗(yàn)證這個(gè)坑.這時(shí)候, 我們就要跪了, 因?yàn)橐獙懸欢?js 來檢查. 但是自從 H5 出現(xiàn)后, 很多常見的 表達(dá)驗(yàn)證 , 它都已經(jīng)幫我們實(shí)現(xiàn)了, 讓我們減輕了很多負(fù)擔(dān), 就好像下面的:
郵箱地址驗(yàn)證:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> </head> <body> <form action=""> <label > 郵箱: <input type="email"> </label> <input type="submit"> </form> </body> </html>
郵箱驗(yàn)證是 H5 自身支持的, 但是我們要驗(yàn)證的場景和情況是多種多樣的, 那該怎么辦? 用回 Js 嗎? 很明顯沒這么蛋疼, 因?yàn)?H5 提供了 pattern 屬性, 讓我們自食其力! 我們可以在 pattern 指定正則表達(dá)式, 只要正則寫的好, 驗(yàn)證就沒煩惱!
正則限定11位數(shù)字:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> </head> <body> <form action=""> <label > 數(shù)字: <input type="text" pattern="^\d{11}$"> </label> <input type="submit"> </form> </body> </html>
問題
大家可以嘗試下, 在輸入非11位的數(shù)字, 都會報(bào)錯(cuò), 這就是 pattern 的功勞. 但是不知道大家發(fā)現(xiàn)了一個(gè)蛋疼的現(xiàn)象沒? 就是如果咱們使用 pattern 的方式去驗(yàn)證表單, 在驗(yàn)證失敗時(shí), 它的提示都是 請與所請求的格式保持一致 , 我的天, 我們的用戶怎么知道所請求的格式是什么鬼, 總不能讓他們?nèi)タ丛创a吧, 要真這樣, 我們連頁面都不用寫了, 直接讓他們把錢給我們得了, 開個(gè)玩笑~
解決方案
有問題, 咱們就得解決, 在面向谷歌編程許久, 終于覓得一良方:
oninvalid:提交的input元素的值為無效值時(shí)(這里是正則驗(yàn)證失敗),觸發(fā)
oninvalid事件。oninvalid屬于Form 事件。
setCustomValidity():這個(gè)是HTML5內(nèi)置的JS方法,用來自定義提示信息
原來可以通過 oninvalid 和 setCustomValidity 來自定義提示, 那這就好辦了, 修改源代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> </head> <body> <form action=""> <label > 數(shù)字: <input type="text" pattern="^\d{11}$" oninvalid="setCustomValidity('請輸入11位數(shù)字')"> </label> <input type="submit"> </form> </body> </html>
終于不是那個(gè)蛋疼的"格式"了, 現(xiàn)在表單驗(yàn)證提示已經(jīng)很明確的告訴我們, 這里應(yīng)該輸入的是什么樣的數(shù)據(jù), 這樣用戶就能更好的修改自己的輸入了!
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享H5表單驗(yàn)證失敗該如何提示內(nèi)容對大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,遇到問題就找億速云,詳細(xì)的解決方法等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。