通过css来验证表单输入框input是否验证通过
2019-08-06 本文已影响0人
smallzip
表单元素中pattern属性，比如在input中的使用
1.input输入框添加pattern属性，pattern属性里面放置正则表达式 \d{5,10} 这个是指输入只能为数字，并且长度为5到10；后面还添加个required属性，代表输入内容为必填。
2.在input下面添加个子节点button按钮，那么这按钮可以给一个伪类，来显示是否可以点击按钮，和是否验证成功。
3.css样式中 input:valid 代表输入框输入内容为正确。
-
input:invalid代表为输入有误。
-
通过css选择器中的 ~ 号来链接兄弟节点。
6.button按钮给一个伪类元素 button::after 内容为 content: "验证通过😊"和content: "验证失败😭"
7.css中的pointer-events是一个大学问，在这里我们只是用两个属性，在验证失败的时候pointer-events: none;代表禁止button所有的css属性，比如禁止点击，失去鼠标的cursor样式。 在验证成功的时候pointer-events: all;代表启动了所有的样式属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试表单pattern属性</title>
</head>
<style>
input {
color: black;
}
input:valid {
color: green;
}
input:valid~button::after {
content: "验证通过😊"
}
input:valid~button {
pointer-events: all;
}
input:invalid~button::after {
content: "验证失败😭"
}
input:invalid~button {
pointer-events: none;
}
</style>
<body>
<h1>测试表单</h1>
<input pattern="\d{0,5}" required />
<butto></button>
</body>
</html>
效果
表单pattern属性
