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

This article mainly introduces html5 how to achieve form verification, the article is very detailed, has a certain reference value, interested friends must read it!

Before delving into form validation, let's think about the true meaning of form validation. At its core, form validation is a system that detects invalid control data and marks these errors for end users. In other words, form validation is a series of checks on the form before it is submitted to the server and notifies the user to correct the error.

But what is the real form validation?

It's an optimization.

Form validation is an optimization because the form validation mechanism alone is not enough to ensure that the form data submitted to the server is correct and valid. On the other hand, form validation is designed to make Web applications throw errors faster. In other words, it is best to use the browser's built-in processing mechanism to inform users that the web page contains invalid form control values. In the past, the data went around on the network just to get the server to notify the user that he had entered the wrong data. If the browser is fully capable of getting errors caught before leaving the client, then we should take advantage of this.

However, the browser's form checking is not enough to handle all errors.

Having said that, HTML5 introduces eight methods for verifying the data correctness of form controls. Let's go through it in turn, but first let's introduce the ValidityState object that is used to feedback the validation status.

In browsers that support Html5 form validation, you can access ValidityState objects through form controls:

Var valCheck = document.myForm.myInput.validity

This line of code gets the ValidityState object of the form element named myInput. The object contains references to all eight validation states, as well as the final validation results.

The calling method is as follows:

ValCheck.valid

After execution, we get a Boolean value that indicates whether the form control has passed all validation constraints. You can think of the valid feature as the final verification result: if all eight constraints pass, the valid attribute is true, otherwise, as long as one constraint fails, the valid flag is false.

As mentioned earlier, there are eight possible validation constraints for any form element. Each condition has a corresponding property name in the ValidityState object, which can be accessed in an appropriate manner. Let's analyze them one by one to see how they are associated with form controls and how they are checked based on the ValidityState object:

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.

A typical use case for a custom validation message is to verify that the values in the control are consistent. For example, the password and password confirm that the values of the two input boxes do not match. As long as the validation message is customized, the control is in an invalid state and customError returns true. To clear the error, simply call setCustomValidity ("") on the control.

The above is all the content of the article "how to implement form validation in html5". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow 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.