HTML5利用約束驗證API來檢查表單的輸入資料的程式碼實例-H5教程-PHP中文網

首頁

web前端

H5教程

HTML5利用約束驗證API來檢查表單的輸入資料的程式碼實例

黄舟

May 14, 2018 pm 04:30 PM

HTML5對於表單有著極大程度的最佳化，無論是語義，小部件，還是資料格式的驗證。我猜你肯定會以瀏覽器兼容作為藉口不願意使用這些“新功能”，但這絕不應該成為使你停滯不前的原因，況且還有像Modernizr和ployfill這樣的工具庫幫助你在不支持Html5的瀏覽器上進行回退處理。當你真正試著使用這些表單的新功能時，我保證你會愛上它。如果說唯一的缺陷，就是提示框的樣式是瀏覽器預設的，你無法改變，好吧，如果你相信瀏覽器廠商的設計師的審美水平的話（我相信他們的設計水平比絕大部分普通人要好，如果不考慮風格兼容的話），抓緊學就對了！
原生驗證
input type
HTML5中為資料格式驗證提供了許多原生的支持，例如：

<input type=&#39;email&#39;/>

當點擊提交按鈕時，如果你輸入的格式不符合email，會導致無法提交，瀏覽器會提示你錯誤訊息。
例如在chrome下：
HTML5利用約束驗證API來檢查表單的輸入資料的程式碼實例
注意：
1、僅當你提交的時候會觸發瀏覽器的驗證
2、不同瀏覽器提示訊息的行為樣式不一樣
3、當有多個input不符合要求時，只會提示一個錯誤，一般會提示表單中相對較前的Input的
不要理所應當的認為當input的type等於tel的時候，如果你輸入的不是電話號碼格式，在提交時也會被瀏覽器的阻擋並提示錯誤訊息，type='tel'在PC端只起到語義的作用，在行動端可以使產生的鍵盤為純數字鍵盤，並不能起到數據驗證的作用。
pattern
你可以使用pattern屬性來對瀏覽器不提供原生驗證的資料格式設定自訂格式驗證。 pattern屬性的值是一個正規表示式（字串）：

<input type=&#39;tel&#39; pattern=&#39;[0-9]{11}&#39; title=&#39;请输入11位电话号码&#39;>

點擊提交時，如果你輸入的資料不符合pattern裡面正則的格式，那麼瀏覽器會阻止表單提交，並提示：'請與所要求的格式保持一致'+ title裡的內容（小字）。但請注意，當你的文字方塊中內容為空的時候，瀏覽器不會對其進行檢查，會直接提交表單（因為瀏覽器認為這個框框不是必填項）。如果你想要這個框框必須有內容，請加上required屬性。
透過HTML原生的驗證系統，基本就能滿足我們對表單提交的限定。但HTML5提供了更進階的功能來方便我們開發和提升使用者體驗。
約束驗證API
預設提示訊息
像'請與所要求的格式保持一致'這樣的瀏覽器提示訊息字串藏在input DOM物件的validationMessage屬性裡，這個屬性在大多數現代的瀏覽器中是唯讀的，即不可修改，例如下面的程式碼：

<input type="text" required id=&#39;input&#39;/>

當提交時，如果Input內容為空，那麼瀏覽器會提示'請填寫此欄位'，我們可以在控制台把這句話印出來：

var input = document.getElementById(&#39;input&#39;)
input.validationMessage // =>&#39;请填写此字段&#39;

如果想修改其中的內容，可以呼叫setCustomValidity介面改變validationMessage的值

input.setCustomValidity(&#39;这个字段必须填上哦&#39;);
// 下面这种做法适用于不支持setCustomValidity的浏览器，基本现代浏览器都不支持这样做
input.validationMessage = &#39;这个字段必须填上哦&#39;

注意，像required這樣的HTML原生驗證，雖然能改變其中信息，但無法把信息置為空字符串，原因下面會講到。
原理
HTML表單驗證系統透過validationMessage屬性偵測該文字方塊的資料是否經過驗證，如果其值為空字符串，則表示通過了驗證，否則，表示未通過，瀏覽器會把其值作為錯誤訊息提示給使用者。所以在原生驗證時，使用者無法把validationMessage的值設定為空字串。
約束驗證API的簡單實例
約束驗證API是在原生方法之上更靈活的表達方式，你可以自己設定資料是否通過，而不借助於正規表示式。原理很簡單，透過if判斷，如果資料格式讓你滿意，那麼你就呼叫setCustomValidity使validationMessage的值為空，否則，你就呼叫setCustomValidity傳入錯誤訊息：
##

input.addEventListener(&#39;input&#39;, function () {
        if(this.value.length > 3){ // 判断条件完全自定义
            input.setCustomValidity(&#39;格式不正确&#39;);
        }else {
            input.setCustomValidity(&#39;&#39;)
        }
 });

每次鍵盤輸入，程式碼都會判斷格式是否正確，然後呼叫setCustomValidity設定validationMessage的值。不要妄想每按下鍵瀏覽器都會提示你結果是否正確，瀏覽器只有在點擊提交按鈕的時候才會提示validationMessage裡的值（如果有的話）。

如果你還沒走思的話，一定會問，既然這樣，為什麼要為input綁定鍵盤事件，每輸入一下都要進行判斷呢？直接為表單綁定提交事件，在提交時再判斷多好，別急，這麼做是有好處的。

隨著輸入判斷格式與樣式作為用戶，我們當然想在得知我輸入了錯誤的格式之後，文字方塊變紅（或有別的提示）。而在我每次輸入一個字符，如果對了，文字方塊就恢復正常。我們可以使用CSS偽類別來實作這個功能：

input:required {
            background-color: #FFE14D;
        }

    /*这个伪类通过validationMessage属性进行判断*/
    input:invalid {
        border: 2px solid red;
    }

上面的required伪类会给所以必填但值空的input提供一个黄色的背景色，而下面的invalid伪类则会为所有未通过验证的input添加一个2px的红边边。我们现在给我们的Input框加上input类即可。
这些伪类的判断条件正与浏览器判断你能否提交表单的条件一样，看validationMessage里的值，所以，我们上面设置每次键盘输入事件都会触发一次判断从而改变CSS伪类样式的渲染，用意正在于此。
更好的用户体验
还有一个缺点，就是当一个input设置为required的时候，在初始化时，因为其本身是空的，所以invalid伪类会对它起作用，这不是我们想看到的，因为我们什么还都没有干。
我们可以并在这些伪类前加上父选择器.invalid，这样，只有在父元素具有invalid类时，这些伪类才会起作用。可以设置一个submit事件，在表单提交因验证失败后，会触发input的invalid事件，给form添加invalid类：
form.addEventListener('invalid'， function() {this.className = 'invalid'}， true)因为invaild是Input的事件，而不是form的事件，所以这里我们设置第三个参数为true采用事件捕获的方式处理之。这样，就大功告成了。
最终实例
好了，现在是时候总结一下我们所学的知识并创造最佳实践了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
    <style>
        input:required{
            background-color: #DCD4CE;
        }
        .invalid input:invalid{
            border: 2px solid red;
        }
    </style>
</head>
<body>
<form id="form">
    <label>email:<input type="email" required id="email"></label>
    <label>IDCard:<input required id="IDCard"></label>
    <input type="submit" id="submit">
</form>
<script>
    var email = document.getElementById(&#39;email&#39;);
    var IDCard = document.getElementById(&#39;IDCard&#39;);
    var form = document.getElementById(&#39;form&#39;);

    IDCard.addEventListener(&#39;input&#39;, function () {
        if(this.value.length != 6) {
            this.setCustomValidity(&#39;IDCard的长度必须为6&#39;)
        }else{
            this.setCustomValidity(&#39;&#39;)
        }
    });

    form.addEventListener(&#39;invalid&#39;, function () {
        this.className = &#39;invalid&#39;;
    }, true)
</script>
</body>
</html>

运行后截图如下：

HTML5利用約束驗證API來檢查表單的輸入資料的程式碼實例

以上就是HTML5利用约束验证API来检查表单的输入数据的代码实例的内容，更多相关内容请关注PHP中文网（www.php.cn）！

陳述

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

超越基礎：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.表單增強引入新輸入類型和驗證屬性，簡化處理和驗證。