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

:user-valid

瀏覽器支援

  • Chrome：119。
  • Edge：119。
  • Firefox：88。
  • Safari：16.5。

資料來源

:user-invalid

瀏覽器支援

  • Chrome：119。
  • Edge：119。
  • Firefox：88。
  • Safari：16.5。

資料來源

使用者輸入內容是所有使用者介面最敏感的問題之一。可用的應用程式必須協助使用者查看、瞭解及修正輸入內容中的任何錯誤。: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。