快速瞭解:user-valid和:user-invalid

XboxYan發表於2024-03-05

最近，Chrome 119 終於正式對:user-valid和:user-invalid這兩個驗證偽類進行了支援

image-20240302154633596

至此，現代瀏覽器總算是全面支援了。

看名稱，似乎和:valid和:invalid有點相似，那麼有什麼區別呢？快速瞭解一下吧

一、:valid 和 :invalid 的缺陷

大家可能或多或少都用過或者見過這兩個偽類，這裡簡單介紹一下

這兩個都是做表單驗證的，當表單輸入合法或者非法的時候匹配。

比如這樣一個輸入框，設定了required屬性，表示必填項

<form>
  <label for="user">user *: </label>
  <input id="user" name="user" required />
  <span></span>
</form>

目前效果是這樣的

image-20240302155320463

下面我們透過:invalid偽類進行校驗，在不合法的情況下邊框變紅，並給出提示

input:invalid {
  border-color: red;
}
input:invalid + span::before {
  content: "請輸入";
  color: red;
}

當輸入框沒有內容時，就會出現錯誤提示

image-20240302155644831

一旦輸入內容了，提示就消失了

image-20240302155726592

乍一看好像沒什麼毛病。

但是有個問題是，這個校驗太及時了，使用者還沒做出任何互動，頁面一進來就就出現錯誤提示了，你想想，使用者一開啟就看見大部分的輸入框都是紅色的，是不是不太友好？

為了解決這個問題，:user-valid和:user-invalid就出現了！

二、更友好的校驗方式

相對於:valid和:invalid，新加了user-字首，其實就是表示使用者，也就是說，這個校驗要等使用者操作之後才會校驗，避免滿屏都是紅色輸入框的尷尬。

使用方式和規則和前面完全相同，我們把前面的CSS改一下

input:user-invalid {
  border-color: red;
}
input:user-invalid + span::before {
  content: "請輸入";
  color: red;
}

下面是兩種偽類的對比

Kapture 2024-03-02 at 16.06.40

可以看到，下面的輸入框在初始情況下是不會校驗的，只有使用者手動輸入後才會校驗，這樣體驗就會好很多了~

值得注意的是，在使用者操作之前（聚焦、輸入等），即使是用指令碼改變輸入框內容，也是不會觸發的

input.value = '1223';
input.value = ''; // 不會提示錯誤

三、簡單總結一下

這樣一個小知識點，你學到了嗎？再來簡單回顧一下

  1. :valid和:invalid可以用於表單驗證
  2. 不過這種方式校驗太及時了，使用者還沒做出任何互動，就出現一堆錯誤提示，體驗不太友好
  3. :user-valid和:user-invalid只有在使用者操作以後才會觸發，提升了體驗
  4. 在使用者操作之前，用 JS改變表單內容是不會觸發的

當然這個特性目前三五年內都是無法使用的，不過沒關係，我們也可以參考這樣的互動方式，提升使用者體驗。最後，如果覺得還不錯，對你有幫助的話，歡迎點贊、收藏、轉發 ❤❤❤

相關文章