Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "HTML5 how to achieve automatic form verification function", the content is detailed, the steps are clear, the details are handled properly, I hope this "HTML5 how to achieve automatic form verification function" article can help you solve your doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

In Html5, by using attributes on elements, you can perform automatic verification when the form is submitted. After executing the code, it will automatically verify whether the input is numeric or not when the form is submitted. If the verification fails, an error message will be displayed.

Form validation example

Next, let's take a look at the attribute assignment appended to html5 that restricts input within an element.

1.required attribute

The new required attribute in html5 can be applied to most input elements (except for hidden elements, picture element buttons). If the content in the element is blank at the time of submission. Submission is not allowed, and the message prompt text is displayed in the browser to prompt the user that the content must be entered in this element, as shown in the figure.

2.pattern attribute

The newly added input elements mentioned earlier, such as email,number,URL, require the input to conform to a certain format, use the pattern attribute for the input element, and set the attribute value to a regular expression in a certain format, and the content is checked to see if it conforms to the given format when submitted. When the input does not conform to the given format, submission is not allowed, and the message prompt text is displayed in the browser. The submitted input must conform to the given format. The code is as follows, and the input is required to be a number and 3 uppercase letters:

For an example of form validation, enter the specified content:

The execution results are as follows:

3.min attribute and max attribute

The min and max attributes are specific to input elements of date type or numeric type, and they limit the range of numeric values and dates entered in the input element.

For an example of form validation, enter a numeric value:

The execution results are as follows:

4.step attribute

The step attribute controls the steps when the value in the input element increases and then decreases. For example, when you want the user to enter a value between 0 and 100, but must be a multiple of 5, you can specify step as 5, as shown in the following code:

Form validation example

The effect is as follows:

Read here, this "HTML5 how to achieve automatic form verification function" article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to pay attention to the industry information channel.

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.