最近，Chrome 119 終于正式對(duì):user-valid和:user-invalid這兩個(gè)驗(yàn)證偽類進(jìn)行了支持。

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

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

一、:valid 和 :invalid 的缺陷

大家可能或多或少都用過或者見過這兩個(gè)偽類，這里簡(jiǎn)單介紹一下。

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

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

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

目前效果是這樣的。

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

input:invalid {
  border-color: red;
}
input:invalid + span::before {
  content: "請(qǐng)輸入";
  color: red;
}

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

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

乍一看好像沒什么毛病。

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

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

二、更友好的校驗(yàn)方式

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

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

input:user-invalid {
  border-color: red;
}
input:user-invalid + span::before {
  content: "請(qǐng)輸入";
  color: red;
}

下面是兩種偽類的對(duì)比。

可以看到，下面的輸入框在初始情況下是不會(huì)校驗(yàn)的，只有用戶手動(dòng)輸入后才會(huì)校驗(yàn)，這樣體驗(yàn)就會(huì)好很多了~

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

input.value = '1223';
input.value = ''; // 不會(huì)提示錯(cuò)誤

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

這樣一個(gè)小知識(shí)點(diǎn)，你學(xué)到了嗎？再來簡(jiǎn)單回顧一下

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

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