本頁面由 Cloud Translation API 翻譯而成。

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

:user-valid

瀏覽器支援

:user-invalid

瀏覽器支援

使用者輸入內容是所有使用者介面最敏感的問題之一。可用的應用程式必須協助使用者查看、瞭解及修正輸入內容中的任何錯誤。:user-valid 和 :user-invalid 擬群組選擇器只會在使用者變更輸入內容後，才提供錯誤的意見回饋，有助於改善輸入驗證的使用者體驗。有了這些新的選取器，您就不需要再編寫具有狀態的程式碼，追蹤使用者變更的輸入內容。

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

:user-valid 和 :user-invalid 虛擬類別選取器與現有的 :valid 和 :invalid 虛擬類別。兩者都比對了表單控制項瞭解目前值是否符合驗證限制。不過，新的 :user-valid 和 :user-invalid 虛擬類別的優點在於這類目標對像只有在使用者與表單控制項互動的情況下，才會與表單控制項相符輸入內容

這是必要和空白的表單控制項，即便使用者定義為「:invalid」也一樣尚未開始與網頁互動。不過，相同的表單控制項比對 :user-invalid，直到使用者變更輸入內容並留在無效的狀態。

使用 `:user-valid` 和 `:user-invalid` 擬物類別

使用這些擬造類別為 input、select 和 textarea 控制項設定樣式，如以下範例所示：

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 張螢幕截圖並排顯示，方便進行比較。每張螢幕截圖都顯示了一份網路表單，當中包含相同的輸入、選取和文字區域控制項。第一張螢幕截圖顯示表單在使用者輸入動作之前的初始狀態。控制項邊框為灰色，下方的說明文字說明每個控制項目前會與 :invalid 擬似類別選取器相符。第二張螢幕截圖顯示使用者為每個控制項提供輸入內容後，同樣的表單。控制項邊框以綠色顯示，下方說明文字說明每個控制項目前皆會比對 :valid 和 :user-valid pseudo-class 選取器。使用者移除所有輸入內容後，第三張螢幕截圖則顯示同一表單。控制項邊框以紅色顯示，下方說明文字說明每個控制項目前會同時比對 :Invalid 和 :user- invalid pseudo-class 選取器。

選取器會根據使用者互動和驗證的組合來比對。限制。請試用下列示範，瞭解這些功能的實際運作情形：

以更少的程式碼提供更優質的使用者體驗

沒有這些虛擬類別，就能讓使用者體驗變成 :user-valid 和 :user-invalid 需要編寫額外的有狀態程式碼。這個程式碼需要追蹤初始值、輸入內容目前的焦點狀態、使用者對值所做的變更程度、執行額外的有效性檢查，最後新增要選取樣式的類別。您現在可以運用瀏覽器可以自動處理這一切

其他資源

封面相片由 Behzad Ghaffarian 提供的 Unsplash。