纯css实现表单验证

一、简介

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

image

二、源码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>css表单验证</title>
 <style>
 :root{
 --error-color: red;
 --success-color: green;
 --default-color: #ccc;
 }
 .f-tips{
 color: var(--error-color);
 }
 input[required]:invalid{
 border: 1px solid var(--error-color);
 outline: 1px solid var(--error-color);
 }
 input[required]:placeholder-shown{
 border: 1px solid var(--default-color);
 outline: 1px solid var(--default-color);
 }
 input[required]:valid{
 border: 1px solid var(--success-color);
 outline: 1px solid var(--success-color);
 }
 input[required]:invalid + span{
 display: inline;
 }
 input[required]:valid + span{
 display: none;
 }
 input[required]:placeholder-shown + span{
 display: none;
 }
 </style>
</head>
<body>
 <form class="form" method="get">
 账号：
 <input class="" type="text" name="account" pattern="[\w]+" placeholder="请输入账号" required>
 <span class="f-tips">请输入正确的账号</span>
 <br>
 密码：
 <input type="password" name="password" required pattern="[0-9]+" placeholder="请输入正确的密码" ></input>
 <span class="f-tips">请输入正确的密码</span>
 <br>
 <input name="button" type="submit" value="提交"></input>
 </form>
</body>
</html>

三、源码解析

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>元素，除了优先级更高外，与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，来让我们的开发更有效率！