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

欢迎关注我的公众号:前端侦探

最近,Chrome 119 终于正式对:user-valid:user-invalid这两个验证伪类进行了支持

至此,现代浏览器总算是全面支持了。

看名称,似乎和:valid:invalid有点相似,那么有什么区别呢?快速了解一下吧

一、:valid 和 :invalid 的缺陷

大家可能或多或少都用过或者见过这两个伪类,这里简单介绍一下

这两个都是做表单验证的,当表单输入合法或者非法的时候匹配。

比如这样一个输入框,设置了required属性,表示必填项

html 复制代码
<form>
  <label for="user">user *: </label>
  <input id="user" name="user" required />
  <span></span>
</form>

目前效果是这样的

下面我们通过:invalid伪类进行校验,在不合法的情况下边框变红,并给出提示

css 复制代码
input:invalid {
  border-color: red;
}
input:invalid + span::before {
  content: "请输入";
  color: red;
}

当输入框没有内容时,就会出现错误提示

一旦输入内容了,提示就消失了

乍一看好像没什么毛病。

但是有个问题是,这个校验太及时了,用户还没做出任何交互,页面一进来就就出现错误提示了,你想想,用户一打开就看见大部分的输入框都是红色的,是不是不太友好?

为了解决这个问题,:user-valid:user-invalid就出现了!

二、更友好的校验方式

相对于:valid:invalid,新加了user-前缀,其实就是表示用户,也就是说,这个校验要等用户操作之后才会校验,避免满屏都是红色输入框的尴尬。

使用方式和规则和前面完全相同,我们把前面的CSS改一下

css 复制代码
input:user-invalid {
  border-color: red;
}
input:user-invalid + span::before {
  content: "请输入";
  color: red;
}

下面是两种伪类的对比

可以看到,下面的输入框在初始情况下是不会校验的,只有用户手动输入后才会校验,这样体验就会好很多了~

值得注意的是,在用户操作之前(聚焦、输入等),即使是用脚本改变输入框内容,也是不会触发的

js 复制代码
input.value = '1223';
input.value = ''; // 不会提示错误

三、简单总结一下

这样一个小知识点,你学到了吗?再来简单回顾一下

  1. :valid:invalid可以用于表单验证
  2. 不过这种方式校验太及时了,用户还没做出任何交互,就出现一堆错误提示,体验不太友好
  3. :user-valid:user-invalid只有在用户操作以后才会触发,提升了体验
  4. 在用户操作之前,用 JS改变表单内容是不会触发的

当然这个特性目前三五年内都是无法使用的,不过没关系,我们也可以参考这样的交互方式,提升用户体验。最后,如果觉得还不错,对你有帮助的话,欢迎点赞、收藏、转发 ❤❤❤

欢迎关注我的公众号:前端侦探

相关推荐
安全系统学习1 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖1 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖1 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水2 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐2 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06272 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台2 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121382 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack3 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python