Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.