HTML5 uses constraint to verify API to check the code instance of the input data of the form

HTML5 has a great optimization of forms, whether it is semantics, small components, or data format verification. I guess you will definitely use browser compatibility as an excuse to use these new features, but this should never be the reason why you stagnate. Moreover, there are tool libraries like Modernizr and Playfill to help you not support HTML5 without HTML5 Browser retreat treatment is performed. When you really try to use the new features of these forms, I promise you to fall in love with it. If the only defect is, the style of the prompt box is default by the browser, you can't change it, okay, if you believe the aesthetic level of the designer of the browser manufacturer (I believe their design level is higher than most ordinary people than most ordinary people, Good, if you don't consider style compatibility), just hurry up and school!

HTML5 provides a lot of native support for data format verification, such as::

 <input type = 'email'/>

When clicking the submission button, if the format you enter does not meet Email, it will cause it to be unable to submit, and the browser will prompt you to make an error message.

For example, under Chrome:

1. Only when you submit it, you will trigger the verification of the browser

2. Different browser prompt information is different

3. When multiple INPUT does not meet the requirements, only one error will be prompted. Generally, it will prompt that the relatively previous Input in the form will be prompted

Do not think that when the Type of Input is equal to Tel, if you enter the phone number format, you will be blocked by the browser and prompt the error message when submitting. The role of semantics can make the generated keyboard generated as a pure digital keyboard, and it does not play a role in data verification.

You can use the Pattern attribute to set custom format verification for the browser without providing native verification data format. The value of the pattern attribute is a regular expression (string):

 <input type = 'TEL' Pattern = '[0-9] {11}' if (this.value.length> 3) {// Judgment condition is completely customized input.SetCustomValidity ('Incorrect format');} else {Input.setCustomValidity ('')}});

Each keyboard input, the code will determine whether the format is correct, and then call the setcustomValidity to set the value of the valueMessage. Don't think that every key browser will prompt your result whether the result is correct. The browser will only prompt the value in ValidationMessage when clicking the submission button (if so).

If you have n’t thought about it, you will definitely ask, since then, why do you have to bind keyboard events for Input, and you need to judge for each input? Submit the incident directly for the form. It is good to judge how good it is when submitting. It is good to do so.

As a user, of course, after learning that I have entered the wrong format, the text box becomes red (or there are other tips). And every time I enter a character, if it is right, the text box will return to normal. We can use CSS pseudo class to implement this function:

 Input: Required {background-color: #ffe14d;} /*This pseudo-class is judged through the valueMessage property* / input: Invalid {border: 2px solid red;}.

The required pseudo -category above provides a yellow background color for the must -have but empty Input, while the Invalid pseudo class below will add a 2PX red side to all unreamed Input. We can add the INPUT class to our INPUT box now.

The judgment conditions of these pseudo -categories are judging whether you can submit the form of the form. See the value in the valueMessage. Therefore, we set up each keyboard input event on it will trigger one judgment to change the rendering of the CSS pseudo -style style. This is here.

Another disadvantage is that when an INPUT is set to required, when initialization, because it is empty, the Invalid pseudo -category will work on it. Dry.

We can add the parent selection device .invalid before these pseudo -categories. In this way, these pseudo -classes only play a role when the parent element has an INVALID class. You can set an Submit event. After the form of submission of the form is submitted, the INVALID event will be triggered after the verification failure, adding the Invalid class to the Form:

Form.adDeventListener ('Invalid', Function () {This.classname = 'Invalid'}, TRUE) Because INVAILD is an incident, not Form's event, so we set the third parameter to use True to use event capture. Obtained Methods. In this way, it was done.

Well, it's time to summarize the knowledge we have learned and create the best practice:

 <! Doctype html> <html Lang = EN> <gead> <Meta Charset = UTF-8> <Title> FORM </Title> <STYLE> Required {background-color: #dcd4ce;} .invali. d input: Invalid {border: 2px solid red;} </style> </head> <body> <FORM ID = FORM> <Label> Email: <input Type = Email Required ID = Email> </Label> <Label> Idcard: < Input Required ID = IDCard> </Label> <input Type = Submit ID = SUBMIT> </Form> <Script> VAR EMAIL = DOCUMENT.GetelementByid ('Email'); VAR IdCard = D. ocument.GetelementByid ('IDCard'); var Form = Document.GetelementByid ('Form'); Idcard.adDeventListener ('Input', Function () {if (this.value.length! = 6) {this.setCustomvalidity ('IDCard's length must be 6')} Else {this.setcustomvalidity ('')}}); Form.adDeventListener ('Invalid', Function () {This.className = 'Invalid'; > </body> </html>

The screenshot after running is as follows:

The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.