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

Today, Xiaobian will share with you the relevant knowledge points of what is the way of form verification in html5. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you will gain something after reading this article. Let's find out together.

Form validation methods: 1. Set the required attribute to true in the form control;2. Set the pattern attribute on the form control and assign appropriate matching rules;3. Set the maxLength attribute on the form control;4. Set the min and max attributes for the form control and assign the minimum and maximum allowed values.

Operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

Today we're going to talk about HTML5 forms validation. Before we dive into forms validation, let's consider what it really means. At its core, form validation is a system that detects invalid control data for end users and flags those errors. 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 errors.

But what is real form validation?

It's an optimization.

Form validation is an optimization because form validation mechanisms alone are not sufficient to guarantee that the form data submitted to the server is correct and valid. Form validation, on the other hand, is designed to make Web applications throw errors faster. In other words, it's best to take advantage of the browser's built-in processing mechanism to inform users that a Web page contains invalid form control values. In the past, data was circulated around the network simply to have the server notify the user that he had entered the wrong data. If browsers have the ability to catch errors before they leave the client, we should take advantage of that.

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

Having said that, HTML5 introduces eight ways to verify the correctness of data for form controls. Let's take a look at it one by one, but first we'll look at the ValidityState object used to feed back validation status.

In browsers that support HTML5 form validation, the ValidityState object can be accessed through the form control:

var valCheck = document.myForm.myInput.validity;

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

The call method is as follows:

valCheck.valid

At the end of execution, we get a Boolean value indicating whether the form control has passed all validation constraints. Think of the valid attribute as the final validation result: if all eight constraints pass, the valid attribute is true; otherwise, if 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 attribute name in the ValidityState object that can be accessed in the appropriate way. Let's examine them one by one to see how they are associated with form controls and how they can be checked based on ValidityState objects:

1、valueMissing

Purpose: Make sure the values in the form control are filled in.

Usage: Sets the required attribute to true in a form control.

Examples:

If the form control is set to the required attribute, then the control will remain in an invalid state until the user fills in or fills in the value by code invocation. For example, an empty text input box cannot pass the required check unless you enter any text in it. ValueMissing returns true when the input value is null.

2、typeMismatch

Purpose: Ensure that the control values match the expected types (e.g., numbe, email, URL, etc.).

Usage: Specifies the value of the type attribute of the form control.

Examples:

Special form control type is not only used to customize the mobile phone keyboard, if the browser can identify the input in the form control does not conform to the corresponding type rules, such as email address without @ symbol, or the input value of the number control is not a valid number, then the browser will mark this control to indicate that the type does not match. In either case, typeMismatch returns true.

3、patternMismatch

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

Usage: Sets the pattern attribute on a form control to assign appropriate matching rules.

Examples:

The pattern feature provides developers with a powerful and flexible way to set up regular expression validation mechanisms for control values in forms. When the pattern attribute is set for a control, patternMismatch returns a value of true whenever the value of the input control does not conform to the pattern rule. For both user guidance and technical reference purposes, you should set the title attribute in a form control that contains the pattern attribute to explain what the rule does.

4、tooLong

Purpose: Avoid input values containing too many characters.

Usage: Sets the maxLength attribute on a form control.

Examples:

The tooLong property returns true if the length of the input value exceeds maxLength. Although form controls typically limit the maximum length at user input, there are cases, such as through programmatic settings, where the maximum is exceeded.

5、rangeUnderflow

Purpose: Limit the minimum value of numeric controls.

Usage: Sets the min attribute for a form control and assigns it the minimum value allowed.

Examples:

In the form control that needs to be checked for numerical range, the numerical value is likely to be temporarily lower than the lower limit of the setting. The rangeUnderflow attribute of ValidityState returns true.

6、rangeOverflow

Purpose: Limit the maximum value of numeric controls.

Usage: Sets the max property for a form control and assigns it the maximum value allowed.

Examples:

Similar to rangeUnderflow, attributes return true if a form control has a value greater than max.

7、stepMismatch

Purpose: Ensure input values conform to min, max and step settings.

Usage: Sets the step attribute for a form control, specifying the increment of a numeric value.

Examples:

This constraint condition 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 a multiple of the value of the step property. For example, if the range is 0 to 100 and the step attribute value is 5, then 17 is not allowed, otherwise stepMismatch returns true.

8、customError

Purpose: To handle errors caused by explicit settings and calculations of application code.

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

Examples:

passwordConfirmationField.setCustomValidity("Password values do not match. ");

Browser built-in validation mechanism does not apply, the need to display custom validation error messages. Application code should set these custom validation messages when input values do not conform to semantic rules.

A typical use case for custom validation messages is to validate that values in controls are consistent. For example, the values of the password and password confirmation 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 "html5 form validation is what" all the content of this article, thank you for reading! I believe everyone has a great harvest after reading this article. Xiaobian will update different knowledge for everyone every day. If you want to learn more knowledge, please 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.