HTML5 forms are automatically validated

In html5, while adding a large number of form elements and attributes, but also a large number of submission of the form and new elements in the form content validity verification, let's talk about automatic verification.

In html5, by using properties for elements, you can perform automatic validation when the form is submitted, and after you perform the code, you will automatically verify that the input is a number when the form is submitted, and if the validation is not possible, the problem message text will be displayed.

Let's take a look at the designation of properties that are appended in html5 to limit input within an element.

1.required property

The new required property in html5 can be used on most input elements (except hidden elements, picture elements on buttons). W hen you commit, if the content in the element is blank. The user is not allowed to submit, and the message prompt text is displayed in the browser, prompting the user to enter content in this element, as shown in the figure:

2.pattern property

New input elements, such as email, number, URL, etc., require that the input conform to a certain format, use the pattern property for the input element, and set the property value to a regular expression in a format that checks whether its contents conform to a given format when submitting. When the input does not conform to a given format, the submission is not allowed, and the information submission text is displayed in the browser, the submission input must conform to the given format, the code is as follows, the input is required to be 1 number and 3 capital letters:

3. Min property and max property

Min and max are private properties of input elements of the date type or numeric type, which limit the range of values and dates entered in the input element.

4.step property

The step property controls the steps when the value in the input element increases too much. 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, code below:

Read more tag properties about HTML: HTML Reference Manual

Systematic learning HTML, you can use learning mode: HTML micro-class