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

更新日期: 2024-03-07阅读: 1.4k标签: 伪类

最近,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 = ''; // 不会提示错误


三、总结

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

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

当然这个特性目前三五年内都是无法使用的,不过没关系,我们也可以参考这样的交互方式,提升用户体验。

来源: 前端侦探

链接: https://www.fly63.com/article/detial/12676

css伪选择器使用总结——css中关于伪类和伪元素的知识总汇

CSS 伪类用于向某些选择器添加特殊的效果,而CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。这里讲总结关于css伪类和伪元素的相关使用

如何使用JS操纵伪元素

获取伪元素的属性值可以使用window.getComputedStyle()方法,获取伪元素的CSS样式声明对象。然后利用getPropertyValue方法或直接使用键值访问都可以获取对应的属性值。 更换class来实现伪元素属性值的更改、使用CSSStyleSheet的insertRule来为伪元素修改样式、

css获取除第一个之外的子元素

有时候我们需要用CSS选择非第一个子元素,例如下面这样的HTML,希望让两个span之间间隔一定的距离,但又不希望简单的给每个span设置margin-right(会导致最后一个span也有margin-right,可能影响之后元素的排版)。

为什么是link-visited-hover-active

通常我们在设置链接的一些伪类(link,visited,hover,active)样式时,要让不同的状态显示正确的样式,我们需要按一定的顺序设置这些伪类的样式。这里我就按CSS2规范中推荐的顺序进行介绍,即 link-visited-hover-active

CSS3新增的伪类有哪些 与 居中div的多种方法

CSS3新增伪类有那些?p:first-of-type:选择属于其父元素的首个<p>元素,p:last-of-type:选择属于其父元素的最后<p>元素,p:only-of-type:属于父元素的特定类型的唯一子元素,p:only-child:属于父元素的唯一子元素的每个<p>元素;p:nth-child(2)

深入理解CSS伪类

伪类经常与伪元素混淆,伪元素的效果类似于通过添加一个实际的元素才能达到,而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。本文将详细介绍伪类的详细知识

css否定伪类:not(s)

:not(X)是CSS中的一个否定伪类(选择器),并且接受一个简单的选择器作为参数。本质上,可以使任一其他选择器(作为参数)。:not(选择器)匹配传递参数选择器未选择的元素。传递参数或许不包括增加的选择器或者伪元素选择器。

善用CSS伪类,不用JS也能做出选项卡功能

本篇文章的技术给予选项卡UI另一种开发的选择,Radio button的特性还有很多应用可以做(如Switcher),只要善用HTML表单元素与CSS的一些技巧,也能玩出很多有趣的功能,甚至替代JavaScript的部份工作.

html中a标签的4个伪类样式

在CSS超链接的属性中,有四个连接方式:a:link a:hover a:visited a:acticve,之前在使用的时候一直是按照自认为的顺序中去写的,就是 L H V A的排序方式,然而有些时候却发现并不起作用了

中间文字,两边横线的css3伪类的使用

CSS伪类是用来添加一些选择器的特殊效果。使用了css3的伪类,即相当于是在一个div中写入文字,然后在它前后各加了一个div,然后进行位置及宽高的调节。代码中只写一个div,然后在css样式中,对该div设置flex布局

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!