Shulou(Shulou.com)06/03 Report--

This article will explain in detail how HTML5 uses constraint verification API to check the input data of the form. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

HTML5 has a great degree of optimization for forms, whether it's semantics, widgets, or data format validation. I guess you'll use browser compatibility as an excuse to be reluctant to use these "new features", but this should never be the reason to hold you back, and there are toollibraries like Modernizr and ployfill that help you fallback on browsers that don't support Html5. When you really try to use the new features of these forms, I'm sure you'll love it. If the only flaw is that the style of the prompt box is the browser default, you can't change it, well, if you believe in the aesthetic level of browser designers (I believe their design level is better than most ordinary people, if you don't consider style compatibility), just learn!

Native verification

Input type

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

When you click the submit button, if the format you enter does not conform to email, it will cause you to fail to submit and the browser will prompt you with an error message.

For example, under chrome:

Note:

1. Browser verification will be triggered only when you submit.

2. Different browsers have different behavior styles of prompts.

3. When more than one input does not meet the requirements, only one error will be prompted, which will generally prompt the relatively earlier Input in the form

Do not take it for granted that when the type of input is equal to tel, if you do not enter the phone number format, it will also be blocked by the browser and give an error message when submitting. Type='tel' only plays a semantic role on the PC side, and on the mobile side, you can make the resulting keyboard a pure numeric keypad, and can not play the role of data verification.

Pattern

You can use the pattern property to set custom format validation for data formats that browsers do not provide native validation. The value of the pattern property is a regular expression (string):

When you click submit, if the data you enter does not conform to the regular format in pattern, the browser will block the form submission and prompt: 'please be consistent with the requested format' + the contents of title (small print). Note, however, that when your text box is empty, the browser will not check it and will submit the form directly (because the browser does not think the box is required). If you want this box to have content, please add the required attribute.

Through HTML's native verification system, we can basically meet our restrictions on form submission. But HTML5 provides more advanced features to facilitate us to develop and enhance the user experience.

Constraint validation API

Default prompt message

Browser prompt strings such as' Please match the requested format 'are hidden in the validationMessage property of the input DOM object, which is read-only and immutable in most modern browsers, such as the following code:

When submitting, if the Input content is empty, the browser will prompt "Please fill in this field". We can print this sentence on the console:

Var input = document.getElementById ('input') input.validationMessage / / = >' Please fill in this field'

If you want to modify the contents, you can call the API setCustomValidity to change the value of validationMessage.

Input.setCustomValidity ('this field must be filled in'); / / the following practice applies to browsers that do not support setCustomValidity, and basic modern browsers do not support this. Input.validationMessage = 'this field must be filled in'

Note that HTML native validation, such as required, can change the information, but cannot set the information to an empty string, for reasons described below.

Principle

The HTML form verification system detects whether the data of the text box is validated through the validationMessage attribute. If the value is an empty string, it is verified. Otherwise, if it fails, the browser will prompt the user with its value as an error message. So in native authentication, the user cannot set the value of validationMessage to an empty string.

A simple example of constraint validation API

Constraint validation API is a more flexible expression over native methods, and you can set whether the data passes or not without resorting to regular expressions. The principle is very simple, judging by if, if the data format is satisfactory, then you call setCustomValidity to make the value of validationMessage empty, otherwise, you call setCustomValidity to pass in the error message:

Input.addEventListener ('input', function () {if (this.value.length > 3) {/ / judgment condition completely customized input.setCustomValidity (' incorrect format');} else {input.setCustomValidity (')})

Each time the keyboard is typed, the code determines whether the format is correct, and then calls setCustomValidity to set the value of validationMessage. Don't assume that every time you press a button, the browser will prompt you if the result is correct. The browser will only prompt you for the value in validationMessage (if any) when you click the submit button.

If you haven't thought about it yet, you must ask, in that case, why bind keyboard events to input and judge each time you type it? It's good to bind the submit event directly to the form and judge how good it is when you submit it. Don't worry.

With input to determine the format and style

As users, we certainly want the text box to turn red (or have other hints) after learning that I have typed in the wrong format. When I type one character at a time, if it is right, the text box returns to normal. We can use the CSS pseudo-class to do this:

Input:required {background-color: # FFE14D;} / * this pseudo class judges through the validationMessage attribute * / input:invalid {border: 2px solid red;}

The required pseudo-class above provides a yellow background color for all required but null input, while the invalid pseudo-class below adds a 2px red edge to all unverified input. We can now add the input class to our Input box.

The criteria for these pseudo-classes are exactly the same as the criteria for browsers to determine whether you can submit the form, looking at the values in validationMessage, so we set the above keyboard input event to trigger a judgment to change the rendering of CSS pseudo-classes, which is the intention.

Better user experience

Another disadvantage is that when an input is set to required, during initialization, the invalid pseudo-class will work on it because it is empty, which is not what we want to see, because we haven't done anything yet.

We can also add the parent selector .parents to these pseudo-classes so that these pseudo-classes work only if the parent element has an invalid class. You can set a submit event, which will trigger the invalid event of input after the form submission fails due to validation, adding an invalid class to form:

Form.addEventListener ('invalid', function () {this.className =' invalid'}, true) because invaild is an event of Input, not an event of form, so here we set the third parameter to true to handle it as event capture. In this way, the job is done.

Final example

Well, it's time to summarize what we've learned and create best practices:

Form input:required {background-color: # DCD4CE;} .roominput:invalid {border: 2px solid red;} email: IDCard: var email = document.getElementById ('email'); var IDCard = document.getElementById (' IDCard'); var form = document.getElementById ('form') IDCard.addEventListener ('input', function () {if (this.value.length! = 6) {this.setCustomValidity (' IDCard must be 6')} else {this.setCustomValidity (')}); form.addEventListener ('invalid', function () {this.className =' invalid';}, true)

The screenshot after running is as follows:

On "HTML5 how to use constraint verification API to check the input data of the form" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.