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

至此，現(xiàn)代瀏覽器總算是全面支持了。

看名稱，似乎和:valid和:invalid有點相似，那么有什么區(qū)別呢？快速了解一下吧

一、:valid 和 :invalid 的缺陷

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

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

比如這樣一個輸入框，設(shè)置了required屬性，表示必填項。

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

目前效果是這樣的。

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

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

當(dāng)輸入框沒有內(nèi)容時，就會出現(xiàn)錯誤提示。

一旦輸入內(nèi)容了，提示就消失了。

乍一看好像沒什么毛病。

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

為了解決這個問題，:user-valid和:user-invalid就出現(xiàn)了！

二、更友好的校驗方式

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

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

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

下面是兩種偽類的對比。

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

值得注意的是，在用戶操作之前（聚焦、輸入等），即使是用腳本改變輸入框內(nèi)容，也是不會觸發(fā)的。

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

三、簡單總結(jié)一下

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

• :valid和:invalid可以用于表單驗證
• 不過這種方式校驗太及時了，用戶還沒做出任何交互，就出現(xiàn)一堆錯誤提示，體驗不太友好
• :user-valid和:user-invalid只有在用戶操作以后才會觸發(fā)，提升了體驗
• 在用戶操作之前，用 JS改變表單內(nèi)容是不會觸發(fā)的

當(dāng)然這個特性目前三五年內(nèi)都是無法使用的，不過我們依然可以參考這樣的交互方式，提升用戶體驗。