核心要點

• HTML5允許客戶端表單驗證無需JavaScript編碼，但對于更復雜的表單，可以使用JavaScript和約束驗證API來增強原生驗證。這是因為存在一些限制，例如并非所有瀏覽器都支持所有HTML5輸入類型和CSS選擇器，并且難以設置錯誤消息氣泡的樣式。
• 約束驗證API提供了一些方法和屬性，例如.willValidate、.checkValidity()、.validity和.setCustomValidity()。這些分別用于檢查是否將驗證字段、驗證字段、檢查字段的有效性以及設置自定義有效性消息。但是，并非所有屬性都受所有瀏覽器支持。
• 可以使用JavaScript和約束驗證API創(chuàng)建一個簡單的、通用的跨瀏覽器表單驗證系統(tǒng)。此系統(tǒng)包括禁用原生驗證、循環(huán)遍歷所有字段以檢查原生驗證是否可用以及輸入類型是否受支持、檢查字段的有效性以及設置自定義有效性消息。此系統(tǒng)可以適應以支持較舊的瀏覽器和不同的輸入類型。

本文是關于HTML5網(wǎng)絡表單的三部分系列文章中的最后一篇，我們將討論JavaScript集成和約束驗證API。如果您尚未閱讀標記和CSS文章，請先閱讀以確保您熟悉這些概念。HTML5允許我們在無需任何JavaScript代碼的情況下實現(xiàn)客戶端表單驗證。但是，在實現(xiàn)更復雜的表單時，我們需要增強原生驗證，因為：

• 并非所有瀏覽器都支持所有HTML5輸入類型和CSS選擇器；
• 錯誤消息氣泡使用通用文本（“請?zhí)顚懘俗侄巍保┎⑶译y以設置樣式；
• :invalid和:required樣式在用戶與表單交互之前就在頁面加載時應用。

一些JavaScript代碼和約束驗證API可以改善用戶體驗。請注意，如果您想支持各種瀏覽器和輸入類型，這可能會變得有點混亂，我們將努力做到這一點。

攔截表單提交

在HTML5之前，客戶端驗證涉及將提交處理程序附加到表單，該處理程序將驗證字段、顯示錯誤并阻止提交事件。在HTML5中，瀏覽器將首先執(zhí)行其自身的驗證——只有在表單有效時才會觸發(fā)提交事件。因此，如果您想執(zhí)行一些復雜的操作，例如顯示您自己的錯誤、比較或自動填充字段，則必須通過將表單的noValidate屬性設置為true來關閉原生驗證：

var form = document.getElementById("myform");
form.noValidate = true;

// 設置處理程序以在提交時驗證表單
// onsubmit 用于更輕松的跨瀏覽器兼容性
form.onsubmit = validateForm;

當然，這意味著您必須在代碼中檢查字段錯誤，但我們很快就會看到，仍然可以使用原生的瀏覽器驗證。

字段.willValidate屬性

每個輸入字段都有一個.willValidate屬性。這將返回：

• true：當瀏覽器將原生驗證字段時；
• false：當瀏覽器不會驗證字段時；
• undefined：當瀏覽器不支持原生HTML5驗證時，例如IE8。

由于我們上面禁用了原生驗證，因此每個字段都將返回false。讓我們創(chuàng)建我們的validateForm處理程序，它將循環(huán)遍歷所有字段并檢查原生驗證是否可用：

var form = document.getElementById("myform");
form.noValidate = true;

// 設置處理程序以在提交時驗證表單
// onsubmit 用于更輕松的跨瀏覽器兼容性
form.onsubmit = validateForm;

循環(huán)迭代表單elements集合中的所有字段，并檢查它們是輸入而不是其他類型，例如按鈕和字段集。下一行很重要……

function validateForm(event) {

    // 獲取跨瀏覽器事件對象和表單節(jié)點
    event = (event ? event : window.event);
    var
        form = (event.target ? event.target : event.srcElement),
        f, field, formvalid = true;

    // 循環(huán)所有字段
    for (f = 0; f < form.elements.length; f++) {
        // 獲取字段
        field = form.elements[f];

        // 忽略按鈕、字段集等
        if (field.nodeName !== "INPUT" && field.nodeName !== "TEXTAREA" && field.nodeName !== "SELECT") continue;

        // 原生瀏覽器驗證可用嗎？
        if (typeof field.willValidate !== "undefined") {

            // 原生驗證可用

        }
        else {

            // 原生驗證不可用

        }
    }
}

false和undefined都是虛假值，因此您不能只檢查field.willValidate！我們現(xiàn)在知道第一個代碼塊內(nèi)的代碼將在可以使用原生驗證時進行評估。但是……

瀏覽器是否支持輸入類型？

如果您閱讀第一部分，您會記得不支持的輸入類型會回退到文本。例如：

// 原生瀏覽器驗證可用嗎？
        if (typeof field.willValidate !== "undefined") {

            // 原生驗證可用

        }
        else {

            // 原生驗證不可用

        }

在Firefox 29或IE11中不受原生支持。這些瀏覽器將（有效地）呈現(xiàn)：

<input type="date" name="dob" />

但是，這兩個瀏覽器都支持文本類型的驗證，因此field.willValidate不會返回undefined！因此，我們必須檢查我們的type屬性是否與對象的.type屬性匹配——如果它們不匹配，我們需要實現(xiàn)舊版回退驗證，例如：

<input type="text" name="dob" />

字段.checkValidity()方法

如果原生驗證可用，則可以執(zhí)行.checkValidity()方法來驗證字段。如果沒有任何問題，則該方法返回true，否則返回false。還有一個類似的.reportValidity()方法，它返回當前狀態(tài)而無需重新檢查，盡管這不太有用，并且并非所有瀏覽器都支持。這兩種方法也會：

1. 設置字段的.validity對象，以便可以更詳細地檢查錯誤；
2. 當驗證失敗時，在字段上觸發(fā)invalid事件。這可以用來顯示錯誤、更改顏色等。請注意，沒有相應的valid事件，因此請記住如有必要重置錯誤樣式和消息。

字段.validity對象

.validity對象具有以下屬性：

.valid – 如果字段沒有錯誤，則返回true，否則返回false。 .valueMissing – 如果字段是必需的但未輸入值，則返回true。 .typeMismatch – 如果值不是正確的語法（例如，格式錯誤的電子郵件地址），則返回true。 .patternMismatch – 如果值與pattern屬性的正則表達式不匹配，則返回true。 .tooLong – 如果值長于允許的maxlength，則返回true。 .tooShort – 如果值短于允許的minlength，則返回true。 .rangeUnderflow – 如果值低于min，則返回true。 .rangeOverflow – 如果值高于max，則返回true。 .stepMismatch – 如果值與step不匹配，則返回true。 .badInput – 如果條目無法轉換為值，則返回true。 .customError – 如果字段設置了自定義錯誤，則返回true。

并非所有屬性都受所有瀏覽器支持，因此請注意不要做太多假設。在大多數(shù)情況下，.valid或.checkValidity()的結果應該足以顯示或隱藏錯誤消息。

(后續(xù)內(nèi)容與原文相同，篇幅過長，此處省略。 請根據(jù)需要自行調整輸出內(nèi)容的長度和細節(jié)。)

以上是HTML5表格：JavaScript和約束驗證API的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！