網頁表單設計中，開發者通常會利用 CSS 提供即時的驗證反饋，例如使用偽類選擇器 :valid 或 :invalid 來標記表單字段是否有效。但這種方法存在一個明顯的問題：

表單字段在用戶尚未輸入時，就已顯示為有效或無效狀態，這會誤導用戶，嚴重影響用戶體驗。

本文將介紹一種全新的、更友好的 CSS 特性，幫助開發者解決這個難題——:user-valid 和 :user-invalid。

傳統 :valid 和 :invalid 存在的問題

使用傳統的偽類 :valid 和 :invalid 時，一旦頁面加載完成，只要表單元素滿足或不滿足驗證規則，相關樣式就會立即應用，即使用戶尚未輸入任何內容。

例如：

• 一個郵箱輸入框，用戶還未輸入任何文字，就已經顯示綠色邊框表示有效，令人困惑。
• 另一個必填項在加載頁面時就顯示紅色邊框提示錯誤，給用戶帶來消極的初始印象。

此外，僅依靠顏色進行提示，顯然也不符合 Web 可訪問性原則，會給色覺障礙用戶造成額外負擔。

新方案：:user-valid 和 :user-invalid

為解決上述問題，CSS 引入了兩個新的偽類選擇器：

• :user-valid
• :user-invalid

它們的優勢在于：

• 僅在用戶交互之后才應用樣式（例如用戶輸入內容或離開字段后）
• 避免在頁面首次加載時出現誤導性的反饋
• 顯著提升用戶體驗與表單的可用性

為什么應當切換到 :user-valid 和 :user-invalid？

與傳統方法相比，這種新的方式使得表單反饋變得：

• 更清晰直觀
• 更尊重用戶交互流程
• 更易于實現符合可訪問性標準的設計

對于尚不支持這兩個新選擇器的瀏覽器，也可以通過替代方案（如:placeholder-shown）達到類似效果。

實際應用示例與實現方法

以下是具體實現方案與推薦用法。

第一步：給表單字段添加 required 屬性

首先，確保表單字段具有 HTML 原生驗證能力：

<input type="email" placeholder="請輸入郵箱" required />

提醒：這一設置讓瀏覽器明確字段何時為無效，但此時不要過早給予視覺反饋。

第二步：使用 :user-valid 和 :user-invalid

通過如下 CSS 實現用戶交互后的驗證反饋：

/* 默認狀態：保持中立外觀 */
input {
  border: 1px solid #ccc;
}

/* 用戶交互后且輸入有效 */
input:user-valid {
  border: 2px solid green;
  background-color: #e6ffe6;
}

/* 用戶交互后且輸入無效 */
input:user-invalid {
  border: 2px solid red;
  background-color: #ffe6e6;
}

現在，視覺反饋只有在用戶真正互動之后才會展現。

兼容性方案：不支持 :user-valid 時的降級方案

對于不支持 :user-valid 的瀏覽器，可以使用 :placeholder-shown 結合傳統偽類實現類似的延遲反饋效果：

/* 用戶未輸入時顯示占位符的中立狀態 */
input:placeholder-shown {
  border: 1px solid #ccc;
  background-color: white;
  color: #666;
}

/* 用戶輸入有效且占位符消失 */
input:valid:not(:placeholder-shown) {
  border: 2px solid green;
  background-color: #e6ffe6;
}

/* 用戶輸入無效且占位符消失 */
input:invalid:not(:placeholder-shown) {
  border: 2px solid red;
  background-color: #ffe6e6;
}

:placeholder-shown 可準確識別用戶是否已輸入，從而避免初始加載時的視覺誤導。

小結：為用戶提供更友好的表單體驗

表單設計的核心是給用戶帶來清晰、直觀且有益的交互反饋：

• 避免用戶還未操作即給予視覺提示。
• 等待用戶實際交互后再應用驗證反饋。
• 提升表單易用性與用戶滿意度。

因此，建議開發者停止使用傳統的 :valid 與 :invalid 進行即時反饋，轉而采用 :user-valid 和 :user-invalid 來實現更精確、更符合用戶期望的交互效果。