How to set the H5 form verification failure? This issue may be often seen in our daily study or work. I hope that you can give you a deep harvest through this issue. Below is the reference content brought by Xiaobian, let’s take a look!
The front-end children’s shoes are in writing, and the generals will always step on the form to verify this pit. At this time, we must be kneeling, because we must write a bunch of JS to check. But since H5 appears Many common expression verification, it has helped us to achieve, let us alleviate a lot of burden, just like the following:
Email address verification:
TESTMailbox verification is H5 itself support, but the scenes and conditions we have to verify are varied, what should I do? ? Is it easy to use? It is obviously not so painful, because H5 provides Pattern attributes, let us eat self-sufficient! We can specify regular expressions in Pattern, as long as it is written, verification is not worried!
OnInvalid: The value of the INPUT element is invalid At the time of value (here is regular verification failure), trigger
There is a problem, we have to solve it, in the face of Google program, finally have a good party:
Everyone can try, in the input non-11 digits, it will report an error, this is the practice of Pattern. But I don't know if you discover a phenomenon of an egg pain? Just if we use Pattern to verify the form, when the verification fails, it is invisible to the requested format, my day, our users Know what ghosts are the requested format, you can't let them go to see the source code. If we don't have to write, let them give us money to us, let them give us a joke ~ Solution
OnInvalid event. OnInvalid belongs to the FORM event.
setcustomvalidity (): This is an HTML5 built-in JS method, with the definition prompt information , it can be used to define prompts with OnInvalid and SetCustomValidity, then this is good, modify the source code as follows :
finally not the egg pain " Format, now the form verification prompt is clearly telling us, what kind of data should be entered here,This way users can better modify their own input! Thank you for reading! After reading the above, do you know how to set the H5 form verification failure? I hope that the content of the article will help everyone. If you want to know more about the content, please pay attention to Tumi Yun Industry Information Channel.