了解什麼是 HTML5 表單驗證和浮動輸入標籤

已發表: 2016-05-16

實施表單驗證在防止惡意用戶在表單字段中輸入亂碼方面起著至關重要的作用。 此外，它還限制了沒有經驗的用戶在表單中錯誤地輸入錯誤信息。

當然，您不希望以不安全的方式從用戶那裡收集不正確的數據。 因此，您必須為表單定義驗證規則。

多年來，我們一直在使用複雜的 TL;DR（即太長；沒有閱讀）JavaScript 代碼來實現客戶端的表單驗證。 值得慶幸的是，隨著“HTML5 表單驗證”的發布，我們現在可以使用最少的 JavaScript 向表單添加驗證。

儘管最新的 HTML 版本提供了一些好處，但最重要的是它附帶了大量新的輸入字段和屬性，這些對於驗證表單是必不可少的，而無需編寫複雜的 JS（JavaScript 的縮寫）驗證代碼。

但請記住，用戶在填寫表格時很容易感到沮喪，尤其是當他們知道自己輸入的數據錯誤時，會更大程度地增加他們的沮喪感。 但是感謝 HTML5，添加浮動輸入標籤可以在用戶填寫表單的同時驗證表單數據。 這樣，如果用戶在輸入字段中犯了任何錯誤，他們就會立即知道。

例如，下面是 Matt Smith 在 Dribble 上發布的一張圖片，展示了浮動標籤模式在應用於表單時是如何工作的：

How the floating label pattern works

這篇文章介紹瞭如何在向 HTML5 表單添加驗證時實現浮動輸入標籤。

但在你開始之前

大多數人可能想先了解驗證 HTML5 表單的過程。 畢竟，並不是所有人都有為 HTML5 表單編寫驗證代碼的經驗。 此外，您可能不了解 HTML5 中新引入的輸入字段和屬性。

HTML5 表單驗證的詳細概述

當您計劃驗證表單時，建議您首先從服務器端驗證開始。 而且，如果您是一名優秀的網頁設計師，請繼續添加客戶端驗證，幫助您的用戶獲得即時反饋，無論他們是否使用正確的數據填寫表單。 例如，當用戶在電子郵件地址字段中輸入數據時向他們提供即時反饋將使他們知道他們輸入的電子郵件地址是有效的。

HTML5 的一大特點是它有助於在不依賴腳本的情況下實現客戶端驗證。 相反，您可以通過在表單元素上使用“驗證屬性”來執行此類任務。 最重要的是，您只需為輸入字段添加“必需”屬性，其餘的由瀏覽器處理。

這是一個示例，將解釋使用 required 屬性向輸入字段添加驗證：

[php]
姓名：<input type="text" name="yourname" required>
[/php]

上面的代碼行使您的瀏覽器知道名稱 INPUT 字段應該被認為是強制性的（即不能留空）。

INPUT field cannot be left blank

如您所見，與“您的姓名”輸入字段對應的文本框中顯示了一個紅色標記。 但是，只要在名稱輸入字段中輸入了一些文本，標記就會變成一個刻度線，表示輸入的值是有效的。

除了<input type="text"> （即文本輸入類型），HTML5 現在支持幾個新的輸入選項，如搜索、電子郵件、電話、日期時間等。簡單來說，使用 HTML5 我們可以編寫以下代碼行：

[php]
<輸入類型=“文本”名稱=“電子郵件”>
[/php]

變成類似的東西：

[php]
<輸入類型=“電子郵件”名稱=“電子郵件”>
[/php]

桌面瀏覽器將像任何標准文本字段一樣呈現上述代碼。

我想提醒您注意的另一件事是：當您嘗試在 CodePen 演示中輸入諸如 required 或 input type=”email” 等屬性時，即使沒有任何內容，您仍然會收到錯誤消息在沒有任何有效電子郵件地址的情況下單擊“提交”按鈕時的消息：

Error message

在我們上面討論的示例中，您可以看到瀏覽器默認顯示錯誤消息。 但是，如果您想將自己的（即自定義）驗證規則應用於輸入值怎麼辦？ 這就是 Regex 模式派上用場的地方。

了解正則表達式模式

在輸入電子郵件地址（如 abc@a）時，您可能已經看到了模式。 不用說，您會希望您的用戶輸入一個真實的電子郵件地址。 而且，通過指定您自己選擇的與您的數據匹配的模式將有助於驗證輸入的值。 例如，您可以確保電子郵件與結尾包含三個或更多字符的模式匹配。 為此，您需要使用“模式屬性”和正則表達式 (RegEx)。

RegEx 基本上是一種用於解析或操作文本的語言。 大多數情況下，正則表達式用於執行複雜的操作（例如搜索和替換）以更好地形成文本數據。 今天，您可以在幾乎所有編程和腳本語言中找到正則表達式的使用。 RegEx 可用於驗證在表單字段中輸入的數據，通過使用模式屬性對輸入類型強制執行它們，如下所示：

[php]
<input id="phone" placeholder="111-111-1111" title="用於傳達電話號碼模式的文本" required pattern="[0-9]{3}-[0-9]{3}-[ 0-9]{4}">
[/php]

此外，如果發生任何驗證錯誤，您可以選擇確定標題屬性以及驗證錯誤以拋出“格式錯誤！”之外的消息。 使用下面給定的代碼行：

[php]
<input type="email" placeholder="Email" 必填模式="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A- Za-z]{2,}$" title="請在此處輸入有效的電子郵件地址。">
[/php]

請記住，您不需要為每個輸入編寫任何荒謬的模式。 相反，在許多情況下，您只需將 required 屬性分配給某些特定類型的數據。 例如，超過 8 的數字將如下所示：

[php]
<input type="number" min="8" 必填>
[/php]

另外，請記住，並非所有瀏覽器都支持所有可用的驗證屬性。 例如，Firefox 瀏覽器與“minlength”模式不兼容。

使用 HTML5 表單驗證的好處

實現 HTML5 表單驗證的最大優勢是即時反饋。 大多數情況下，當用戶填寫表單中的某些字段時，會突出顯示一種指示，以告知他們輸入的值是否有效。

Indication will be highlighted while users fill out some field

現在，當您在文本框中輸入內容時，邊框顏色變為綠色，如下所示：

The border color changes to green

但是，如您所見，這種方法有一個缺點。 即使在“名字”字段中添加無效（或不完整）值時，用戶也會收到該值正確的指示。 也許，您可能會考慮將:invalid:not(:empty)添加到代碼中。 不幸的是，這種邏輯不適用於瀏覽器，因為它們通常認為表單元素是空的。

想知道該怎麼做？

您可以嘗試在代碼中添加名為“:placeholder-shown”的新偽選擇器，如下所示：

[php]
<表格>
<標籤>
<span>名字</span>
<input type="text" pattern=".{4,}" placeholder=" " required title="輸入至少 4 個字符。">
</標籤>

<button>提交</button>

</form>
[/php]

但是大多數瀏覽器似乎不提供對占位符顯示的支持，因此您最好編寫一個腳本來在輸入字段為空或不為空時切換類。 這是相同的 JavaScript 代碼：

[php]
$('input:empty, textarea:empty').addClass('empty');

$('輸入').keyup(function () {

if ($(this).val().trim() !== ”) {

$(this).removeClass('empty');

} 別的 {

$(this).addClass('empty');

}

});
[/php]

注意：請記住從上面的 HTML 標記中刪除佔位符元素。

現在，當您將上述代碼片段與 HTML5 標記一起運行時，輸出將如下所示：

Code snippet along with HTML5 markup

如您所見，文本框的顏色保持紅色，直到應用到該字段的驗證未完成。 單擊提交會在輸入不完整名稱時顯示錯誤消息。

但是，一旦用戶輸入完整（超過 3 個字符），文本框邊框的顏色就會變為綠色。

The color of the text box border changes to green.

如何在 HTML5 中添加浮動輸入標籤？

現在，讓我們討論一下在驗證 HTML5 表單時添加浮動輸入標籤的方法。 這樣做有助於增強表單的外觀和感覺。 這是 HTML 標記。

要實現浮動標籤模式，您必須將標籤推送到HTML 標記中<input>元素的正下方：

[php]
<表格>
<標籤>
<input type="text" pattern=".{4,}" required title="字符不能少於4個。">
<span>你的名字</span>
</標籤>
<標籤>
<input type="email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{ 2,}$" title="請輸入有效的電子郵件。">
<span>您的電子郵件</span>
</標籤>
<button>提交</button>

</form>
[/php]

CSS 看起來像：

[CSS]
標籤 {
位置：相對；
顯示：內聯塊；
}
標籤跨度{
位置：絕對；
左：20px；
頂部：-2em；
字體大小：0.75em；
光標：文本；
顏色：#f27853；
過渡：全部 150ms 緩動；
}
輸入 {
邊框：1px 實心#f2f2f2；
大綱：無；
}
輸入：焦點{
邊框顏色：#d9d9d9；
}
輸入：有效{
邊框顏色：#42d142；
}
輸入：無效{
邊框顏色：#ff8e7a；
}
輸入空{
邊框顏色：#d9d9d9；
}
輸入.空 + 跨度 {
最高：50%；
變換：translateY（-50%）；
字體大小：1em；
背景：無；
顏色：#cccccc；
}
身體 {
顯示：彎曲；
最小高度：100vh；
背景：#f1f1f1；
字體系列：'Lato'，無襯線；
字體大小：150%；
}
形式 {
邊距：自動；
}

輸入，按鈕{
填充：15px 20px；
邊框半徑：1px；
邊框：2px 實心#bdbdbd；
}

按鈕 {
邊框顏色：#363636；
背景：#363636；
顏色：#FFFFFF；
}
[/css]

最後，編寫 JavaScript 代碼：

[代碼]
$('input:empty, textarea:empty').addClass('empty');
$('輸入').keyup(function () {
if ($(this).val().trim() !== ”) {
$(this).removeClass('empty');
} 別的 {
$(this).addClass('empty');
}
});
[/代碼]

輸出：

Output

在 HTML5 中使用浮動輸入標籤時，您可以實現多種效果，例如：

  • 在驗證 HTML5 表單時添加具有淡入/淡出效果的圖標。
  • 如果輸入的數據無效，請搖動輸入。
  • 正確填寫輸入時，使輸入的顏色變暗。
需要考慮的事情

在對 HTML5 表單實施驗證時，您需要熟悉：

  1. 瀏覽器支持：HTML5 表單在現代瀏覽器和 IE10+ 中以完美的方式工作。 雖然 IE 版本 9 和更早的版本不支持驗證偽選擇器，但它仍然可以正常工作。
  2. 警告：在對 HTML5 表單應用驗證時，您不能執行的一件事是設置驗證消息的樣式。 那是因為瀏覽器禁用了此類功能。

最後的話

對錶單實施驗證對於為您的站點添加額外的安全層至關重要。 這是因為它可以防止惡意用戶在表單字段中添加惡意文本作為值。 此外，當用戶在表單的經過驗證的輸入字段中輸入一些輸入時，向他們提供即時反饋將有助於增強他們的體驗。 畢竟，他們不必花時間認識到他們在填寫表格時犯了錯誤。 但是，僅使用 JavaScript 驗證表單可能具有挑戰性。 這就是 HTML5 表單驗證的用武之地。

使用 HTML5 對錶單應用驗證時，您無需編寫長行複雜的 JS 代碼。 相反，您可以使用最少的 JavaScript 編碼來實現表單驗證規則。 最重要的是，HTML5 表單驗證提供了許多新功能，例如浮動輸入標籤，使表單看起來很漂亮，鼓勵用戶執行表單提交。