CSS form validation function implementation code

Rendering

principle

In the form element, there is a pattern attribute, which can customize regular expressions (such as mobile phone number, email address, ID card, etc.); the valid pseudo-class can match elements that pass the pattern validation; the invalid pseudo-class, on the contrary, can match elements that fail the pattern validation; so you can do whatever you want. The effect diagram above only makes some simple effects. For more effects and restrictions, you can use your imagination;

html

The layout is very simple. Input and button are sibling nodes. The required attribute means that the input content must be verified.

<section class="container">
  <input type="text" name="tel" placeholder="Please enter your mobile number" pattern="^1[3456789]\d{9}$" required><br>
  <input type="text" name="tel" placeholder="Please enter the verification code" pattern="\d{4}" required><br>
  <button type="submit"></button>

CSS

The scss preprocessor is used here

input {
  //Button style when validation passes&:valid {
    &~button {
      pointer-events: all;
      cursor: pointer;
      &::after {
        content: "Submit: +1:"
      }
    }
  }
  //Button style when validation fails&:invalid {
    &~button {
      pointer-events: none; // Remove click events to make the button unclickable&::after {
        content: "Unverified:unamused:"
      }
    }
  }
}

Summarize

The above is the implementation code of the CSS form validation function introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!