rendering

The principle of

In the form element, there is a pattern attribute that allows you to customize regular expressions (such as mobile phone number, email, ID card..). ; The valid pseudo-class matches elements that are validated by Pattern. Invalid pseudo-classes, on the other hand, can match elements that are not validated by Pattern. So you can casually make, the above renderings just do some simple effects, more effects and restrictions on the play of your imagination;

html

The layout is simple. Input and button are siblings of each other. The required attribute means that input must be verified.

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

css

SCSS preprocessor is used here, the structure is clear

Input {// The style of the button when the validation is passed &:valid {&~button {pointer-events: all; cursor: pointer; &::after { content:"Submit 👍"}} // Invalid {&~button {pointer-events: none; &::after {content:"Not verified 😒"}}}}Copy the code

Phase to recommend

Contenteditable and user-modify can also be played 🌚

CSS stealth wave effect 🌊, this is probably the simplest way to implement it, right? ️

HTML directive implementation tooltip text prompt, pure CSS implementation (no scripting) ️

The last

If you think this article is good, please don’t forget to like and follow 😊