Prompt for HTML5 Form Verification failure, html5 Form Verification failure

Prompt for HTML5 Form Verification failure, html5 Form Verification failure

Preface

When the front-end kids shoes write pages, they will inevitably step on form verification. at this time, we will kneel down, because we need to write a bunch of js to check. however, since the emergence of H5, many common expression verification methods have been implemented for us, which reduces the burden, as shown below:

Email address verification:
 

<! DOCTYPE html> 

Email verification is supported by H5 itself, but there are various scenarios and situations for verification. What should we do? Back to Js? Obviously, this is not the case because H5 provides the pattern attribute, so that we can rest on our own! We can specify a regular expression in pattern. As long as the regular expression is well written, verification will be free of worries!
Regular Expressions are limited to 11 digits:
<! DOCTYPE html> 

Problem
If you enter a non-11-digit number, the system will report an error. This is the credit of pattern. But I don't know if you have found a problem? That is, if we use pattern to verify the form, when the verification fails, it prompts that it should be consistent with the requested format, my day, how do our users know what the requested format is, so they cannot go to the source code. To be honest, we don't need to write any pages, let them give us the money. Just kidding ~
Solution
If there is a problem, we have to solve it. After a long time of programming for Google, we finally find a good solution:
Oninvalid: When the submitted input element value is invalid (here, regular expression verification fails ),
Oninvalid event. Oninvalid is a Form event.
SetCustomValidity (): This is the built-in JS method of html5. use the custom prompt information
You can use oninvalid and setCustomValidity to customize the prompt. Then, you can easily modify the source code as follows:
<! DOCTYPE html> 
Result:

Finally, it's not the tough "format". Now the Form Verification prompt clearly tells us what data should be entered here, in this way, users can better modify their input!
The above is a prompt for HTML5 Form Verification failure. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!