The implementation code of the form verification function of CSS Sao operation The
renderings are as follows:
Principle: In the
form element, there is a pattern attribute, which can customize regular expressions (such as mobile phone number, email address, ID card...); valid pseudo-class, which can match through
Elements that have passed the pattern verification; the invalid pseudo-class is the opposite, which can match elements that have not passed the pattern verification; so you can do it casually. The above renderings are just some simple effects. For more effects, you can use your imagination. !
html part: The
layout is very simple. The relationship between input and button is a sibling node. The required attribute means required, that is, the input content must be verified. The code is as follows:
<section class="container">
<input type="text" name="tel" placeholder="请输入手机号码" pattern="^1[3456789]\d{9}$"
required><br>
<input type="text" name="tel" placeholder="请输入验证码" pattern="\d{4}" required><br>
<button type="submit"></button>
CSS (CSS preprocessor is used here)
input {
// 验证通过时按钮的样式
&:valid {
&~button {
pointer-events: all;
cursor: pointer;
&::after {
content: "提交:+1:"
}
}
}
// 验证不通过时按钮的样式
&:invalid {
&~button {
pointer-events: none; // 去除点击事件，让按钮无法点击
&::after {
content: "未通过验证:unamused:"
}
}
}
}
Summary
Hahaha, well, the above is the implementation code of the CSS Sao operation form verification function that Xiao Wang introduced to you. I hope it will help you!