怎么設(shè)置H5的表單驗(yàn)證失敗提示語

怎么設(shè)置H5的表單驗(yàn)證失敗提示語？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

創(chuàng)新互聯(lián)建站是一家以網(wǎng)絡(luò)技術(shù)公司，為中小企業(yè)提供網(wǎng)站維護(hù)、成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站備案、服務(wù)器租用、域名與空間、軟件開發(fā)、成都微信小程序等企業(yè)互聯(lián)網(wǎng)相關(guān)業(yè)務(wù)，是一家有著豐富的互聯(lián)網(wǎng)運(yùn)營推廣經(jīng)驗(yàn)的科技公司，有著多年的網(wǎng)站建站經(jīng)驗(yàn)，致力于幫助中小企業(yè)在互聯(lián)網(wǎng)讓打出自已的品牌和口碑，讓企業(yè)在互聯(lián)網(wǎng)上打開一個(gè)面向全國乃至全球的業(yè)務(wù)窗口：建站聯(lián)系熱線：028-86922220

前端的童鞋在寫頁面時(shí), 都不可避免的總會(huì)踩到表單驗(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>

怎么設(shè)置H5的表單驗(yàn)證失敗提示語

郵箱驗(yàn)證是 H5 自身支持的, 但是我們要驗(yàn)證的場(chǎng)景和情況是多種多樣的, 那該怎么辦? 用回 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>

怎么設(shè)置H5的表單驗(yàn)證失敗提示語

問題

大家可以嘗試下, 在輸入非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 來自定義提示, 那這就好辦了, 修改源代碼如下:

<!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é)果:

怎么設(shè)置H5的表單驗(yàn)證失敗提示語

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

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)怎么設(shè)置H5的表單驗(yàn)證失敗提示語大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目：怎么設(shè)置H5的表單驗(yàn)證失敗提示語
URL標(biāo)題：http://jinyejixie.com/article0/pgeoio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、微信公眾號(hào)、外貿(mào)建站、全網(wǎng)營銷推廣

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

怎么設(shè)置H5的表單驗(yàn)證失敗提示語