H5: 表單驗證失敗的提示語

時間 2019-11-06

標籤 h5 表單驗證失敗提示欄目 HTML 简体版

原文原文鏈接

前言

前端的童鞋在寫頁面時, 都不可避免的總會踩到表單驗證這個坑. 這時候, 咱們就要跪了, 由於要寫一堆js來檢查. 可是自從H5出現後, 不少常見的表達驗證, 它都已經幫咱們實現了, 讓咱們減輕了不少負擔, 就好像下面的:html

郵箱地址驗證:前端

<!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位數字:編程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    <form action="">
        <label >
            數字: <input type="text" pattern="^\d{11}$">
        </label>
        <input type="submit">
    </form>
</body>
</html>

問題

你們能夠嘗試下, 在輸入非11位的數字, 都會報錯, 這就是pattern的功勞. 可是不知道你們發現了一個蛋疼的現象沒? 就是若是我們使用pattern的方式去驗證表單, 在驗證失敗時, 它的提示都是請與所請求的格式保持一致, 個人天, 咱們的用戶怎麼知道所請求的格式是什麼鬼, 總不能讓他們去看源碼吧, 要真這樣, 咱們連頁面都不用寫了, 直接讓他們把錢給咱們得了, 開個玩笑~segmentfault

解決方案

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

oninvalid：提交的input元素的值爲無效值時（這裏是正則驗證失敗），觸發
oninvalid事件。oninvalid屬於Form 事件。code
setCustomValidity()：這個是HTML5內置的JS方法，用來自定義提示信息orm

原來能夠經過oninvalid和setCustomValidity來自定義提示, 那這就好辦了, 修改源代碼以下:htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    <form action="">
        <label >
            數字: <input type="text" pattern="^\d{11}$" oninvalid="setCustomValidity('請輸入11位數字')">
        </label>
        <input type="submit">
    </form>
</body>
</html>

結果:blog