纯css实现表单验证

一、简介

本文将通过css的3个伪类选择器（伪类选择器分别是:invalid、:valid、:placeholder-shown）来实现表单验证， 效果如下：

image

​

二、源码

 
 
 
 


 

 账号：
 
 请输入正确的账号
 

 密码：
 
 请输入正确的密码
 

 
 

三、源码解析

1、input > pattern

pattern属性规定用于验证输入字段的模式，模式指的是正则表达式。在input中指定pattern，就可以校验输入的内容是否合法。

浏览器支持程度如下：

image

2、伪类选择器:invalid :valid

:invalid 选择器用于在表单元素中的值是非法时设定的指定样式

:valid 选择器用于在表单元素中的值是合法时设定的指定样式

浏览器支持程度如下：

image

3、伪类选择器:placeholder-shown

:placeholder-shown在表单元素显示placeholder text时生效

浏览器支持程度如下：

image

4、伪类:root

:root 这个css伪类匹配文档树的根元素。对于HTML来说，:root表示元素，除了优先级更高外，与html选择器相同。

在声明全局CSS变量时，:root会很有用

:root {
  --main-color: hotpink; /*作为全局变量 前缀一定要加--*/
  --pane-padding: 5px 42px;
}
#div1 {
  background-color: var(--main-color, red); /*第一个参数自定义属性名称，第二个可选参数用作回退值，如果第一个参数引用的自定义属性无效，则该函数将使用第二个值*/
}
 
#div2 {
  padding: var(--pane-padding);
}

:root浏览器支持程度

image

var()浏览器支持程度

image

四、总结

大部分浏览器支持程度还是可以的，当然由于部分属性ie浏览器是不支持的，故此就不能用于ie浏览器需求开发了。还有大量CSS属性在我们日常开发中还没有用到，但不代表没用到的属性就没有使用或存在的价值，我们依然可以多多浏览书籍或文章，发现更多更实用的CSS属性或JS的API，来让我们的开发更有效率！