快速了解: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改变表单内容是不会触发的

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

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

相关推荐
Struggler281几秒前
Chrome插件开发
前端
前端 贾公子12 分钟前
Monorepo + vite 怎么热更新
前端
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台2 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控