HTML5 表單驗(yàn)證失敗的提示語(yǔ)問(wèn)題

發(fā)布時(shí)間：2017-07-13 14:15:37 作者：佚名

這篇文章主要介紹了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>

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

問(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)求的格式保持一致 , 我的天, 我們的用戶(hù)怎么知道所請(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é)果: