How to implement form validation function in css

Principle

There is a pattern attribute in the form element, which can customize regular expressions (such as mobile phone number, email, ID card...); valid pseudo-class , can match elements that pass pattern verification; the invalid pseudo-class, on the contrary, can match elements that do not pass pattern verification.

(Recommended tutorial:CSS Getting Started Tutorial)

html code

The layout is very simple, input and button are sibling nodes, and the required attribute is Required means that the entered content must be verified;

css code

The scss preprocessor used here

input { // 验证通过时按钮的样式 &:valid { &~button { pointer-events: all; cursor: pointer; &::after { content: "提交:+1:" } } } // 验证不通过时按钮的样式 &:invalid { &~button { pointer-events: none; // 去除点击事件，让按钮无法点击 &::after { content: "未通过验证:unamused:" } } } }

Related video tutorial recommendations:css video tutorial

The above is the detailed content of How to implement form validation function in css. For more information, please follow other related articles on the PHP Chinese website!