纯css实现表单验证
2020-09-21 本文已影响0人
行走的巨象
一、简介
本文将通过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，来让我们的开发更有效率！
