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;

<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 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!