您當(dāng)前位置：圖趣網(wǎng)（Tuquu） >> 網(wǎng)頁設(shè)計(jì)教程 >> 移動(dòng)前端 >> 瀏覽設(shè)計(jì)教程

HTML5 表單驗(yàn)證失敗的提醒語題目

2017/10/10 15:35:14來源：互聯(lián)網(wǎng)

前言

前端的童鞋在寫頁面時(shí), 都不可避免的總會(huì)踩到 表單驗(yàn)證 這個(gè)坑. 這時(shí)候, 我們就要跪了, 由于要寫一堆 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>

郵箱驗(yàn)證是 H5 自身支持的, 但是我們要驗(yàn)證的場景和情況是多種多樣的, 那該怎么辦? 用回 Js 嗎? 很顯明沒這么蛋疼, 由于 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>

題目

大家可以嘗試下, 在輸入非11位的數(shù)字, 都會(huì)報(bào)錯(cuò), 這就是 pattern 的功勞. 但是不知道大家發(fā)現(xiàn)了一個(gè)蛋疼的征象沒? 就是假如咱們使用 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>

效果:

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

以上所述是小編給大家介紹的HTML5 表單驗(yàn)證失敗的提醒語題目，盼望對(duì)大家有所幫助，假如大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也特別很是感謝大家對(duì)圖趣網(wǎng)網(wǎng)站的支持！

[教程作者：佚名]
關(guān)鍵詞：表單 驗(yàn)證 失敗 提示 問題
免責(zé)聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉(zhuǎn)載，請(qǐng)注明出處，素材資料僅供個(gè)人學(xué)習(xí)與參考，請(qǐng)勿用于商業(yè)用途！
本文地址：http://irelandcustomcontracting.com/tutorial/wd398.html
h5實(shí)現(xiàn)獲取用戶地理定位的實(shí)例代碼
HTML5地理定位_動(dòng)力節(jié)點(diǎn)Java學(xué)院整頓
圖趣網(wǎng)微信
建議反饋
×