亚洲最大看欧美片,亚洲图揄拍自拍另类图片,欧美精品v国产精品v呦,日本在线精品视频免费

  • 站長資訊網(wǎng)
    最全最豐富的資訊網(wǎng)站

    h5表單介紹和表單驗(yàn)證失敗問題實(shí)例

    這篇文章主要介紹了HTML5 表單驗(yàn)證失敗的提示語問題的相關(guān)資料,需要的朋友可以參考下

    前言

    前端的童鞋在寫頁面時(shí), 都不可避免的總會踩到 表單驗(yàn)證 這個坑. 這時(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>

    h5表單介紹和表單驗(yàn)證失敗問題實(shí)例

    郵箱驗(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>

    h5表單介紹和表單驗(yàn)證失敗問題實(shí)例

    問題

    大家可以嘗試下, 在輸入非11位的數(shù)字, 都會報(bào)錯, 這就是 pattern 的功勞. 但是不知道大家發(fā)現(xiàn)了一個蛋疼的現(xiàn)象沒? 就是如果咱們使用 pattern 的方式去驗(yàn)證表單, 在驗(yàn)證失敗時(shí), 它的提示都是 請與所請求的格式保持一致 , 我的天, 我們的用戶怎么知道所請求的格式是什么鬼, 總不能讓他們?nèi)タ丛创a吧, 要真這樣, 我們連頁面都不用寫了, 直接讓他們把錢給我們得了, 開個玩笑~

    解決方案

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

    oninvalid:提交的input元素的值為無效值時(shí)(這里是正則驗(yàn)證失敗),觸發(fā)

    oninvalid事件。oninvalid屬于Form 事件。

    setCustomValidity():這個是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>

    結(jié)果:

    h5表單介紹和表單驗(yàn)證失敗問題實(shí)例

    終于不是那個蛋疼的"格式"了, 現(xiàn)在表單驗(yàn)證提示已經(jīng)很明確的告訴我們, 這里應(yīng)該輸入的是什么樣的數(shù)據(jù), 這樣用戶就能更好的修改自己的輸入了!

    以上所述是小編給大家介紹的HTML5 表單驗(yàn)證失敗的提示語問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

    贊(0)
    分享到: 更多 (0)
    網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號