When the front -end children's shoes are written on the page, it is inevitable that we will always step on the form to verify this pit. At this time, we will kneel because it is necessary to write a bunch of JS to check. But since the appearance of H5, many common expression verification verifications It has all been achieved for us, let us reduce a lot of burdens, as if below:
Verification of mailbox address:
<! Doctype html> <html Lang = EN> <Head> <meta charset = UTF-8> <Title> Test </Title> </Head> <body> <FORM ACTION => <Label> Email: <input Type = email> </label> <input type = submit> </form> </body> </html>
The mailbox verification is supported by H5 itself, but the scenes and situation we have to verify are diverse. What should we do? Do we use JS? Obviously it does not hurt so much, because H5 provides Pattern attributes, let us eat it! We can specify regular expressions in Pattern. As long as the regular writing is good, there is no trouble for verification!
Limited 11 -digit number: <! Doctype html> <html lang = EN> <gead> <meta charset = UTF-8> <Title> Test </Title> </Head> <body> <FORM ACTION => <Label> Numbers: <input Type = Text Pattern =^/D {11} $> </label> <input type = submit> </form> </body> </html> questionYou can try it, and you will report an error when entering the number of non -11 -bit. This is the credit of Pattern. But I do n’t know if you have found a phenomenon of egg pain? It ’s if we use pattern to verify the form. , Its prompts are to keep consistent with the format requesting. My God, how do our users know what the format of the request is, and never let them see the source code. If this is true, we don’t even need to the page. Write, let them give us money directly, and make a joke ~
SolutionIf you have any problems, we have to solve it. For a long time in Google's programming, we finally found a good recipe:
Oninvalid: When the value of the INPUT element submitted is invalid value (here is the regular verification failure), trigger
Oninvalid event. Oninvalid belongs to the Form event.
SetCustomValidity (): This is the built -in JS method of HTML5. Use a definition prompt message
It turns out that you can be a definition of reminder through Oninvalid and SetCustomValidity, then this is easy to do. Modify the source code as follows:
<! Doctype html> <html lang = EN> <gead> <meta charset = UTF-8> <Title> Test </Title> </Head> <body> <FORM ACTION => <Label> Numbers: <input Type = Text Pattern =^/D {11} $ oninvalid = SetcustomValidity ('Please enter 11 digits')> </label> <input type = submit> </form> </body> </html>result:
Finally, it is not that egg painful format. Now the form verification prompt has clearly told us what kind of data should be entered here so that users can better modify their input!
The above is the prompt that the HTML5 form verification failure introduced by the editor to you. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!