H5表單驗證失敗該如何提示

這篇文章主要介紹了H5表單驗證失敗該如何提示，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

為肅北等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及肅北網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站制作、做網(wǎng)站、肅北網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

我們知道，前端的童鞋在寫頁面時, 都不可避免的總會踩到表單驗證這個坑.這時候, 我們就要跪了, 因為要寫一堆 js 來檢查. 但是自從 H5 出現(xiàn)后, 很多常見的表達驗證 , 它都已經(jīng)幫我們實現(xià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 自身支持的, 但是我們要驗證的場景和情況是多種多樣的, 那該怎么辦? 用回 Js 嗎? 很明顯沒這么蛋疼, 因為 H5 提供了 pattern 屬性, 讓我們自食其力! 我們可以在 pattern 指定正則表達式, 只要正則寫的好, 驗證就沒煩惱!

正則限定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ù)字, 都會報錯, 這就是 pattern 的功勞. 但是不知道大家發(fā)現(xiàn)了一個蛋疼的現(xiàn)象沒? 就是如果咱們使用 pattern 的方式去驗證表單, 在驗證失敗時, 它的提示都是請與所請求的格式保持一致 , 我的天, 我們的用戶怎么知道所請求的格式是什么鬼, 總不能讓他們?nèi)タ丛创a吧, 要真這樣, 我們連頁面都不用寫了, 直接讓他們把錢給我們得了, 開個玩笑~

解決方案

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

oninvalid：提交的input元素的值為無效值時（這里是正則驗證失?。?，觸發(fā)

oninvalid事件。oninvalid屬于Form 事件。

setCustomValidity()：這個是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('請輸入11位數(shù)字')">
        </label>
        <input type="submit">
    </form>
</body>
</html>

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

感謝你能夠認真閱讀完這篇文章，希望小編分享H5表單驗證失敗該如何提示內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細的解決方法等著你來學習!

當前標題：H5表單驗證失敗該如何提示
網(wǎng)站路徑：http://muchs.cn/article32/gddopc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、靜態(tài)網(wǎng)站、網(wǎng)站建設(shè)、ChatGPT、網(wǎng)頁設(shè)計公司、微信公眾號

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

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