核心要點(diǎn)

• HTML5允許客戶端表單驗(yàn)證無(wú)需JavaScript編碼，但對(duì)于更復(fù)雜的表單，可以使用JavaScript和約束驗(yàn)證API來(lái)增強(qiáng)原生驗(yàn)證。這是因?yàn)榇嬖谝恍┫拗疲绮⒎撬袨g覽器都支持所有HTML5輸入類(lèi)型和CSS選擇器，并且難以設(shè)置錯(cuò)誤消息氣泡的樣式。
• 約束驗(yàn)證API提供了一些方法和屬性，例如.willValidate、.checkValidity()、.validity和.setCustomValidity()。這些分別用于檢查是否將驗(yàn)證字段、驗(yàn)證字段、檢查字段的有效性以及設(shè)置自定義有效性消息。但是，并非所有屬性都受所有瀏覽器支持。
• 可以使用JavaScript和約束驗(yàn)證API創(chuàng)建一個(gè)簡(jiǎn)單的、通用的跨瀏覽器表單驗(yàn)證系統(tǒng)。此系統(tǒng)包括禁用原生驗(yàn)證、循環(huán)遍歷所有字段以檢查原生驗(yàn)證是否可用以及輸入類(lèi)型是否受支持、檢查字段的有效性以及設(shè)置自定義有效性消息。此系統(tǒng)可以適應(yīng)以支持較舊的瀏覽器和不同的輸入類(lèi)型。

本文是關(guān)于HTML5網(wǎng)絡(luò)表單的三部分系列文章中的最后一篇，我們將討論JavaScript集成和約束驗(yàn)證API。如果您尚未閱讀標(biāo)記和CSS文章，請(qǐng)先閱讀以確保您熟悉這些概念。HTML5允許我們?cè)跓o(wú)需任何JavaScript代碼的情況下實(shí)現(xiàn)客戶端表單驗(yàn)證。但是，在實(shí)現(xiàn)更復(fù)雜的表單時(shí)，我們需要增強(qiáng)原生驗(yàn)證，因?yàn)椋?/p>

• 并非所有瀏覽器都支持所有HTML5輸入類(lèi)型和CSS選擇器；
• 錯(cuò)誤消息氣泡使用通用文本（“請(qǐng)?zhí)顚?xiě)此字段”）并且難以設(shè)置樣式；
• :invalid和:required樣式在用戶與表單交互之前就在頁(yè)面加載時(shí)應(yīng)用。

一些JavaScript代碼和約束驗(yàn)證API可以改善用戶體驗(yàn)。請(qǐng)注意，如果您想支持各種瀏覽器和輸入類(lèi)型，這可能會(huì)變得有點(diǎn)混亂，我們將努力做到這一點(diǎn)。

攔截表單提交

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

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

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

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

字段.willValidate屬性

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

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

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

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

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

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

function validateForm(event) {

    // 獲取跨瀏覽器事件對(duì)象和表單節(jié)點(diǎn)
    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;

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

            // 原生驗(yàn)證可用

        }
        else {

            // 原生驗(yàn)證不可用

        }
    }
}

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

瀏覽器是否支持輸入類(lèi)型？

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

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

            // 原生驗(yàn)證可用

        }
        else {

            // 原生驗(yàn)證不可用

        }

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

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

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

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

字段.checkValidity()方法

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

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

字段.validity對(duì)象

.validity對(duì)象具有以下屬性：

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

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

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

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