核心要點

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

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

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

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

攔截表單提交

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

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

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

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

字段.willValidate屬性

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

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

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

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

// 設(shè)置處理程序以在提交時驗證表單
// 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)的代碼將在可以使用原生驗證時進(jìn)行評估。但是……

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

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

// 原生瀏覽器驗證可用嗎？
        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()方法，它返回當(dāng)前狀態(tài)而無需重新檢查，儘管這不太有用，並且並非所有瀏覽器都支持。這兩種方法也會：

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

字段.validity對象

.validity對象具有以下屬性：

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

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

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

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