Renderings
principle
Form elements, there is a pattern
property, can customize the regular expression (e.g., phone number, email,.); valid伪类
Can be matched by pattern
the element verified; invalid伪类
on the contrary, can match failed pattern
elements authenticated; so he can easily do it, the above renderings just do some simple effects, more effects and limit everyone to play to their imagination slightly;
html
The layout is simple, input
with button
the relationship between siblings, the required
property is required meaning, that is, the contents of the input must be validated;
<section class="container">
<input type="text" name="tel" placeholder="请输入手机号码" pattern="^1[3456789]\d{9}$" required><br>
<input type="text" name="smscode" placeholder="请输入验证码" pattern="\d{4}" required><br>
<button type="submit"></button>
</section>
css
As used herein is a scss
preprocessor, a clear structure
input {
// 验证通过时按钮的样式
&:valid {
&~button {
pointer-events: all;
cursor: pointer;
&::after {
content: "提交"
}
}
}
// 验证不通过时按钮的样式
&:invalid {
&~button {
pointer-events: none; // 去除点击事件,让按钮无法点击
&::after {
content: "未通过验证"
}
}
}
}
web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
If you liked this article, please do not forget to point a praise or attention