HTML5 表單驗證失敗的提示語問題-H5教程-PHP中文網

首頁

web前端

H5教程

HTML5 表單驗證失敗的提示語問題

小云云

Dec 08, 2017 am 09:03 AM

h5html5提示

前端的童鞋在寫頁面時, 都不可避免的總會踩到表單驗證這個坑. 這時候, 我們就要跪了, 因為要寫一堆js 來檢查. 但是自從H5 出現後, 很多常見的表達驗證, 它都已經幫我們實現了, 讓我們減輕了很多負擔, 本文我們就和大家分享HTML5 表單驗證失敗的提示語問題。

郵件位址驗證:

<!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 的方式去驗證表單, 在驗證失敗時, 它的提示都是請與所要求的格式保持一致, 我的天, 我們的用戶怎麼知道所請求的格式是什麼鬼, 總不能讓他們去看源碼吧, 要真這樣, 我們連頁面都不用寫了, 直接讓他們把錢給我們得了, 開個玩笑~

解決方案

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

oninvalid：提交的input元素的值為無效值時（這裡是正規驗證失敗），觸發

oninvalid事件。 oninvalid屬於Form 事件。

setCustomValidity()：這個是HTML5內建的JS方法，用來自訂提示訊息

原來可以透過oninvalid 和setCustomValidity 來自訂提示, 那這就好辦了, 修改原始碼如下:

<!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(&#39;请输入11位数字&#39;)">
        </label>
        <input type="submit">
    </form>
</body>
</html>

HTML5 表單驗證失敗的提示語問題

相關推薦：

h5表單介紹和表單驗證失敗問題實例

laravel表單驗證失敗如何防止原始表單資料都被清除？

JavaScript實作表單驗證功能的簡單範例

以上是HTML5 表單驗證失敗的提示語問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5：探索最新版本的HTMLMay 03, 2025 am 12:14 AM

html5isamajorrevisionofthehtmlStandardThatRevolutionsWebDevelopmentBybyIntroDucingNewSemanticeLementSemelementsandAndCapabilities.1）itenhancesCodereAdabilityAndSeowitability andSeowithelientsLike，and.2）

超越基礎：H5代碼中的高級技術May 02, 2025 am 12:03 AM

H5的高級技巧包括：1.利用進行複雜圖形繪製，2.使用WebWorkers提升性能，3.通過WebStorage增強用戶體驗，4.實現響應式設計，5.利用WebRTC實現實時通信，6.進行性能優化和最佳實踐。這些技巧幫助開發者構建更動態、互動和高效的Web應用。

H5：網絡內容和設計的未來May 01, 2025 am 12:12 AM

H5（HTML5）將通過新元素和API提升網頁內容和設計。 1）H5增強了語義化標記和多媒體支持。 2）它引入了Canvas和SVG，豐富了網頁設計。 3）H5的工作原理是通過新標籤和API擴展HTML功能。 4）基本用法包括使用創建圖形，高級用法涉及WebStorageAPI。 5）開發者需注意瀏覽器兼容性和性能優化。

H5：網絡開發的新功能和功能Apr 29, 2025 am 12:07 AM

H5帶來了多項新功能和能力，極大提升了網頁的互動性和開發效率。 1.語義化標籤如、增強了SEO。 2.多媒體支持通過和標籤簡化了音視頻播放。 3.Canvas繪圖提供了動態圖形繪製工具。 4.本地存儲通過localStorage和sessionStorage簡化了數據存儲。 5.地理位置API便於開發基於位置的服務。

H5：HTML5的關鍵改進Apr 28, 2025 am 12:26 AM

HTML5帶來了五個關鍵改進：1.語義化標籤提升了代碼清晰度和SEO效果；2.多媒體支持簡化了視頻和音頻嵌入；3.表單增強簡化了驗證；4.離線與本地存儲提高了用戶體驗；5.畫布與圖形功能增強了網頁的可視化效果。

HTML5：標準及其對Web開發的影響Apr 27, 2025 am 12:12 AM

HTML5的核心特性包括語義化標籤、多媒體支持、離線存儲與本地存儲、表單增強。 1.語義化標籤如、等，提升代碼可讀性和SEO效果。 2.和標籤簡化多媒體嵌入。 3.離線存儲和本地存儲如ApplicationCache和LocalStorage，支持無網絡運行和數據存儲。 4.表單增強引入新輸入類型和驗證屬性，簡化處理和驗證。