用户验证的未来趋势: 快速掌握 :user-valid 和 :user-invalid
最近,Chrome 119
终于正式对:user-valid
和:user-invalid
这两个验证伪类进行了支持。
至此,现代浏览器总算是全面支持了。
看名称,似乎和:valid
和:invalid
有点相似,那么有什么区别呢?快速了解一下吧
一、:valid 和 :invalid 的缺陷
大家可能或多或少都用过或者见过这两个伪类,这里简单介绍一下
这两个都是做表单验证的,当表单输入合法或者非法的时候匹配。
比如这样一个输入框,设置了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; }
当输入框没有内容时,就会出现错误提示:
一旦输入内容了,提示就消失了:
乍一看好像没什么毛病。
但是有个问题是,这个校验太及时了,用户还没做出任何交互,页面一进来就就出现错误提示了,你想想,用户一打开就看见大部分的输入框都是红色的,是不是不太友好?
为了解决这个问题,:user-valid
和:user-invalid
就出现了!
二、更友好的校验方式
相对于:valid
和:invalid
,新加了user-
前缀,其实就是表示用户,也就是说,这个校验要等用户操作之后才会校验,避免满屏都是红色输入框的尴尬。
使用方式和规则和前面完全相同,我们把前面的CSS
改一下:
input:user-invalid { border-color: red; } input:user-invalid + span::before { content: "请输入"; color: red; }
下面是两种伪类的对比:
可以看到,下面的输入框在初始情况下是不会校验的,只有用户手动输入后才会校验,这样体验就会好很多了~
值得注意的是,在用户操作之前(聚焦、输入等),即使是用脚本改变输入框内容,也是不会触发的
input.value = '1223'; input.value = ''; // 不会提示错误
三、总结
这样一个小知识点,你学到了吗?再来简单回顾一下
:valid
和:invalid
可以用于表单验证;- 不过这种方式校验太及时了,用户还没做出任何交互,就出现一堆错误提示,体验不太友好;
:user-valid
和:user-invalid
只有在用户操作以后才会触发,提升了体验;- 在用户操作之前,用
JS
改变表单内容是不会触发的。
当然这个特性目前三五年内都是无法使用的,不过没关系,我们也可以参考这样的交互方式,提升用户体验。
码云笔记 » 用户验证的未来趋势: 快速掌握 :user-valid 和 :user-invalid