這篇文章主要介紹HTML5如何解決表單驗(yàn)證失敗的提示語問題，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),南川企業(yè)網(wǎng)站建設(shè),南川品牌網(wǎng)站建設(shè),網(wǎng)站定制,南川網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,南川網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

郵箱地址驗(yàn)證:
 

    
    


    
        
            郵箱: 
        
        
    

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

正則限定11位數(shù)字:

    
    


    
        
            數(shù)字: 
        
        
    

問題

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

解決方案

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

oninvalid：提交的input元素的值為無效值時(shí)（這里是正則驗(yàn)證失?。|發(fā)

oninvalid事件。oninvalid屬于Form 事件。

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

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

    
    


    
        
            數(shù)字: 
        
        
    

結(jié)果:

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

以上是“HTML5如何解決表單驗(yàn)證失敗的提示語問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！