: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