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

This article mainly introduces "what form verification methods are there in HTML5". In daily operation, I believe that many people have doubts about what form verification methods there are in HTML5. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "what form verification methods are in HTML5?" Next, please follow the editor to study!

1 、 valueMissing

Purpose: to ensure that the values in the form controls are filled in.

Usage: set the required property to true in the form control.

Example:

-if the form control sets the required property, then the control will always be in an invalid state before the user fills in or fills in the value through the code call. For example, an empty text input box cannot pass a required check unless you enter any text in it. When the input value is empty, valueMissing returns true.

2 、 typeMismatch

Aim: to ensure that the control values match the expected types (such as numbe, email, URL, etc.).

Usage: specify the type property value of the form control.

Example:

-the special form control type is not only used to customize the mobile keyboard, if the browser can recognize that the input in the form control does not conform to the corresponding type rules, such as no @ symbol in the email address, or the input value of the number control is not a valid number, then the browser will mark this control to prompt the type mismatch. Regardless of the error case, typeMismatch returns true.

3 、 patternMismatch

Purpose: to verify that the input is a valid format according to the formatting rules set on the form control.

Usage: set the pattern property on the form control and assign appropriate matching rules to the well.

Example:

-pattern feature provides developers with a powerful and flexible way to set regular expression verification mechanism for the control value of the form. When the pattern property is set for the control, patternMismatch returns a true value as long as the value of the input control does not conform to the pattern rules. For both user guidance and technical reference, you should set the title attribute in the form control that contains the pattern feature to illustrate the role of the rules.

4 、 tooLong

Purpose: to avoid too many characters in the input value.

Usage: set the maxLength property on the form control.

Example:

-if the length of the input value exceeds maxLength, the tooLong property will return true. Although form controls usually limit the maximum length when entered by the user, in some cases, such as through programmatic settings, the maximum value is exceeded.

5 、 rangeUnderflow

Purpose: to limit the minimum value of numeric controls.

Usage: set the min property for the form control and give it the minimum allowed value.

Example:

In the form controls that need to check the range of values, the values are likely to be temporarily lower than the lower limit set. At this point, the rangeUnderflow property of ValidityState will return true.

6 、 rangeOverflow

Purpose: to limit the maximum value of numeric controls.

Usage: set the max property for the form control and give it the maximum allowed value.

Example:

-similar to rangeUnderflow, if the value of a form control is larger than max, the property will return true.

7 、 stepMismatch

Objective: to ensure that the input values conform to min, max and step settings.

Usage: set the step property for the form control and specify the increment of the value.

Example:

-this constraint is used to ensure that the values meet the requirements of min, max and step. In other words, the current value must be the sum of the minimum value and the multiple of the step property value. For example, if the value of the stepMismatch property is 5 from 0 to 100, 17 is not allowed at this time, otherwise the true value is returned.

8 、 customError

Objective: to deal with errors caused by explicit setting and calculation of application code.

Usage: call setCustomValidity (message) to place the form control in customError state.

Example:

PasswordConfirmationField.setCustomValidity ("Password values do not match.")

-browser built-in verification mechanism is not applicable, the need to display a custom verification error message. When the input value does not conform to the semantic rules, the application code should set these custom validation messages.

At this point, the study of "what form validation methods are there in HTML5" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.