:user-valid 和 :user-invalid 虛擬類別

:user-valid

瀏覽器支援

  • 119
  • 119
  • 88
  • 16.5

來源

:user-invalid

瀏覽器支援

  • 119
  • 119
  • 88
  • 16.5

來源

使用者輸入內容是使用者介面最敏感的問題之一。可用的應用程式必須協助使用者瞭解、瞭解並修正輸入內容中的任何錯誤。:user-valid 和 :user-invalid 虛擬類別選取器只會在使用者變更輸入內容後針對錯誤提供意見回饋，藉此改善輸入驗證的使用者體驗。有了這些新的選取器，不必再撰寫有狀態的程式碼來追蹤使用者變更的輸入內容。

使用者互動虛擬類別選取器

:user-valid 和 :user-invalid 虛擬類別選取器與現有的 :valid 和 :invalid 虛擬類別類似。兩者會根據目前值是否符合驗證限制，比對表單控制項。不過，新的 :user-valid 和 :user-invalid 虛擬類別的優點是，只有在使用者與輸入內容產生顯著互動後，才會與表單控制項相符。

即便使用者尚未開始與頁面互動，必要和空白的表單控制項也會與 :invalid 相符。不過，除非使用者變更輸入內容，並將該欄位設為無效狀態，否則相同的表單控制項才會與 :user-invalid 相符。

使用 :user-valid 和 :user-invalid 虛擬類別

請使用這些虛擬類別設定輸入、選取和文字區域控制項的樣式，如以下範例所示：

input:user-valid,
select:user-valid,
textarea:user-valid {
  border-color: green;
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: red;
}

<input required="required" />

<select required="required">
  <option value="">Choose an option</option>
  <option value="1">One</option>
</select>

<textarea required="required"></textarea>

並排結合 3 張螢幕截圖以供比較的圖片。每張螢幕截圖都會顯示包含相同輸入、選取和文字區域控制項的網路表單。第一張螢幕截圖顯示表單在使用者輸入內容之前的初始狀態。控制項邊框為灰色，下方說明文字則說明每個控制項目前與 :無效虛擬類別選取器相符。第二張螢幕截圖顯示使用者為各個控制項提供輸入內容後，顯示了相同的表單。控制項邊框為綠色，下方說明文字則說明每個控制項目前會同時比對 :valid 與 :user-valid 虛擬類別選取器。第三和最後一張螢幕截圖顯示使用者移除所有輸入內容後產生的相同表單。控制項邊框為紅色，下方說明文字指出每個控制項目前會同時比對 :invalid 和 :user-invalid 虛擬類別選取器。

這些選取器會根據使用者互動和驗證限制的組合進行比對。請與下列示範互動，看看實際操作情形：

減少程式碼，提升使用者體驗

如果沒有這些虛擬類別，要獲得 :user-valid 和 :user-invalid 提供的使用者體驗，就必須編寫額外的有狀態程式碼。該程式碼需要追蹤初始值、輸入的目前焦點狀態、使用者變更值的時間程度、執行額外有效性檢查，最後新增要選取樣式的類別。您現在可以仰賴瀏覽器自動處理上述所有操作。

其他資源

Behzad Ghaffarian 在 Unsplash 上提供的封面相片。