更快樂的HTML5表格驗證

CSS的input:invalid {}樣式在表單元素無效時很有用，但直接使用用戶體驗很差。例如，表單加載時立即顯示無效樣式，這會讓用戶感到困惑。因此，這種用法在實際應用中很少見。然而，如果能避免這個問題， :invalid選擇器就能在表單驗證中發揮巨大作用，而無需依賴大型庫。

Dave提出了一種改進方案，基於2017年的原始想法：

 <code>form.errors :invalid { outline: 2px solid red; }</code>

只有在確定表單處於錯誤狀態並添加了errors類後，才會應用原生錯誤樣式。測試也很容易。例如，可以在提交按鈕點擊時應用該類：

 <code>submitButton.addEventListener("click", (e) => { form.classList.toggle("errors", !form.checkValidity()) });</code>

也可以在輸入框失去焦點時或其他時機應用。甚至可以將每個輸入框用包裝器包裹，並在適當的時候切換包裝器的類。

Dave將此想法應用於Vue：

我們初始化表單組件時將errors設置為false ，因為我們不希望在用戶提交表單之前顯示錯誤樣式。 invalidateForm函數只是將this.error設置為true 。這是CSS :invalid偽類的缺點之一，它過於急切。通過監聽invalid事件，可以延遲樣式的應用，直到第一次表單提交嘗試之後，我們知道表單存在錯誤。

這種方法無需額外引入庫，充分利用了HTML表單驗證的原生功能。以下鏈接是一個改進的版本，也顯示了錯誤消息：

直接鏈接→

以上是更快樂的HTML5表格驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章！