How to implement form validation with css
This article introduces the relevant knowledge of "how to realize form verification in css". In the operation process of actual cases, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!
principle
In the form element, there is a pattern attribute, which can customize regular expressions (such as mobile phone number, mailbox, ID card..); The valid pseudo-class matches elements that pass pattern validation; the invalid pseudo-class, on the other hand, matches elements that do not pass pattern validation.
html
The layout is very simple, input and button are sibling nodes, required attribute is required meaning, that is, the input content must be verified;
css
Here is the scss preprocessor, clear structure
input {
//Verify the style of the button when passing
&:valid {
&--button {
pointer-events: all;
cursor: pointer;
&::after {
content: "Submit"
}
}
}
//Verify the style of the button when it does not pass
&:invalid {
&--button {
pointer-events: none; //Remove click events to make buttons clickable
&::after {
content: "Failed validation"
}
}
}
}
"CSS how to achieve form validation" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!
