在網頁製作中，常常遇到表單填寫需求。為了確保收集到對的資料，必須進行資料驗證，當使用者輸入錯誤資料時，使用適當的方式提醒使用者。
進行資料驗證時，最安全的狀況是前後端皆有執行驗證。而前端驗證除了確保資料正確以外，尚須考慮使用者體驗，例如：
- 驗證時機
一般來說即時驗證 (real-time validate) 優於提交時驗證。而即時驗證應開始於使用者輸入時，而非預設錯誤。 - 錯誤提醒
需注意呈現方式，例如針對錯誤項目給予紅色框框或紅色提示訊息(通常紅色會有警示含義)。應有明確的錯誤資訊，例如：明確告知格式錯誤、長度錯誤…等。
而驗證的方式，可以考慮使用 HTML5 所提供的表格驗證，亦可以使用 JS 撰寫更複雜的邏輯驗證。本文以 HTML5 表單驗證進行說明。
Outline
* 如何設定 HTML5 進行資料驗證
* 資料驗證結果之欄位樣式設定
* 自訂錯誤訊息
* 參考資料➤ 如何設定 HTML5 進行資料驗證
先看一個簡單的範例，再細說我們有哪些屬性可供控制。如下圖，僅有一個輸入框及提交按鈕。
其中輸入框的設置為 <input type="text" id="name" name="name" required> 。而當使用者尚未輸入任何訊息，按下提交按鈕，則錯誤訊息顯示如下：
這是 HTML5 表單驗證在 Chrome 預設的呈現效果，不同瀏覽器會有不同的預設呈現方式。以下開始介紹我們有哪些屬性可供控制。
使用帶有語意的輸入類型進行驗證
type 設定為帶有語意的類型，例如 email、URL 等，需通過格式驗證，才能送出表單。以 <input type="email" id="email" name="email"> 為例。
使用驗證相關屬性
- required
必填。以<input type="text" id="name" name="name" required>為例。
- pattern
使用正則表達式進行驗證。以<input type="text" id="az" name="az" pattern="[a-z]">為例，僅能輸入 a 到 z 之間的小寫英文字。在真實專案中則能依照業務邏輯，寫入複雜的正則判斷。
- min 與 max
輸入值需大於等於或是小於等於設定值，可同時設定 min 與 max，以<input type="number" id="number" name="number" min="4">為例。
- step
整數倍值，可以設定值，例如設定 3，則為 3 的整數倍數，0、3、6…。以<input type="number" id="number" name="number" step="3">為例。
- maxlength
最大長度。以<input type="text" id="text" name="text" maxlength="10">為例，超過十個字就無法再輸入多餘字元。
➤ 資料驗證結果之欄位樣式設定
當資料驗證結果可於偽類選擇器中設定。
:valid輸入驗證正確:invalid輸入驗證錯誤
簡單的設定，當正確時，有綠色邊框；錯誤時，有紅色邊框。
input:valid{ border:2px solid green;}input:invalid{ border:2px solid red;}
但上述設定有一個致命缺陷，也就是當使用者一進入畫面時，尚未輸入任何資料，可能就因為為空，而變成驗證錯誤的結果，呈現紅色邊框，對使用者體驗非常不好。
這時我們可能需要一些 JS 的幫助。利用切換 class 的方式給予樣式的呈現。透過 checkValidity 方法，此方法可以檢查該元素是否具有驗證條件，以及是否驗證通過，回覆布林值。
加入驗證通過及失敗時的 class：
input.valid{ border:2px solid green;}input.invalid{ border:2px solid red;}
當使用者開始輸入時，驗證通過，加上 valid class，並移除錯誤驗證 invalid class。反之同理。此做法也符合即時驗證，使用者體驗較佳。
➤ 自訂錯誤訊息
可以利用 setCustomValidity 方法自定義錯誤訊息，並且可以利用 input.validity得知驗證失敗原因。我們可以簡單的客製化必填、信箱格式兩種錯誤訊息：
其他錯誤可以點連結看詳盡訊息：連結。這邊要額外注意的是客製化訊息會覆蓋原本的錯誤訊息，成為唯一錯誤訊息值，所以設定時，最好能依照錯誤原因，判斷條件，給予適當的錯誤提示訊息。
另外要注意的是瀏覽器支援度問題，以 require 驗證屬性為例，在 IE 11 以下目前是不支援的。主流的 chrome、safari、Firefox 等支援度還不錯。需依專案需求考量。
筆者目前使用的是 Vue 框架，在資料驗證上，使用的是 VeeValidate 套件。當專案大、驗證邏輯較複雜時，推薦使用 VeeValidate 套件。若專案中只有小部分需驗證，例如形象網站中可能有一小區塊的聯絡資訊，則可以考慮使用 HTML5 表單驗證哦！
以上是今天的分享，有任何問題都歡迎留言指教，謝謝 😊
