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

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

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

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

    前言

    前端的童鞋在寫(xiě)頁(yè)面時(shí), 都不可避免的總會(huì)踩到 表單驗(yàn)證 這個(gè)坑. 這時(shí)候, 我們就要跪了, 因?yàn)橐獙?xiě)一堆 js 來(lái)檢查. 但是自從 H5 出現(xiàn)后, 很多常見(jià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)證失敗問(wèn)題實(shí)例

    郵箱驗(yàn)證是 H5 自身支持的, 但是我們要驗(yàn)證的場(chǎng)景和情況是多種多樣的, 那該怎么辦? 用回 Js 嗎? 很明顯沒(méi)這么蛋疼, 因?yàn)?H5 提供了 pattern 屬性, 讓我們自食其力! 我們可以在 pattern 指定正則表達(dá)式, 只要正則寫(xiě)的好, 驗(yàn)證就沒(méi)煩惱!

    正則限定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)證失敗問(wèn)題實(shí)例

    問(wèn)題

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

    解決方案

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

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

    oninvalid事件。oninvalid屬于Form 事件。

    setCustomValidity():這個(gè)是HTML5內(nèi)置的JS方法,用來(lái)自定義提示信息

    原來(lái)可以通過(guò) oninvalid 和 setCustomValidity 來(lái)自定義提示, 那這就好辦了, 修改源代碼如下:

    <!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('請(qǐng)輸入11位數(shù)字')">          </label>          <input type="submit">      </form>  </body>  </html>

    結(jié)果:

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

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

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

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