Describes the 8 methods of Form Verification in HTML5, and html58

Describes the 8 methods of Form Verification in HTML5, and html58

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

But what is form verification?

Is an optimization.

Form Verification is an optimization because only the form verification mechanism is insufficient to ensure that the form data submitted to the server is correct and valid. On the other hand, Form Verification is designed to make Web applications throw errors faster. In other words, it is best to use the browser's built-in processor to tell the user that the webpage contains invalid form control values. In the past, data was circled over the network only to allow the server to notify the user that he entered the wrong data. If the browser is capable of capturing errors before leaving the client, we should take advantage of this advantage.

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

Even so, HTML5 introduces eight methods to verify the data correctness of Form Controls. Let's take a look at it one by one, but first we need to introduce the ValidityState object used to feedback the verification status.

In browsers that support Html5 form verification, you can use Form Controls to access the ValidityState object:

var valCheck = document.myForm.myInput.validity;

This line of code obtains the ValidityState object of the form element named myInput. The object contains references to all eight verification states and final verification results.

The call method is as follows:

valCheck.valid

After execution, we get a Boolean value indicating whether the form control has passed all verification constraints. We can regard the valid feature as the final verification result: If all eight constraints are passed, the valid feature is true. Otherwise, the valid flag is false if one constraint fails.

As mentioned above, any form element has eight possible verification constraints. Each condition has a corresponding feature name in the ValidityState object and can be accessed in an appropriate way. Let's analyze them one by one to see how they are associated with Form Controls and how to check them based on ValidityState objects:

1. valueMissing

Purpose: To ensure that the values in the form control are filled in.

Usage: Set the required attribute to true in the Form Control.

Example:

<input type="text" name="myText" required>

Description: if the form control sets the required feature, the control remains invalid until the user fills in or uses the Code call method to fill in the value. For example, an empty text input box cannot pass the required check unless any text is entered. If the input value is null, valueMissing returns true.

2. typeMismatch

Objective: To ensure that the control value matches the expected type (such as numbe, email, and URL ).

Usage: specifies the type property value of the Form Control.

Example:

<input type="email" name="myEmail">

For details, the special form control type is not only used to customize the mobile phone keyboard. If the browser can identify that the input in the form control does not comply with the corresponding type rules, for example, the email address does not contain the @ symbol, or if the input value of the number control is not a valid number, the browser will mark the control to indicate that the type does not match. In either case, typeMismatch returns true.

3. patternMismatch

Purpose: To verify whether the input is in a valid format based on the format rules set on the Form Control.

Usage: set the pattern feature on the Form Control and assign appropriate matching rules to the well.

Example:

<input type="text" name="creditcardnumber" pattern="[0-9]{16}" title="A creditcard number is 16 digits with no spaces or dashes">

Detailed Description: The pattern feature provides developers with a powerful and flexible way to set the regular expression verification mechanism for the control values of the form. After the pattern feature is set for the control, as long as the value of the input control does not conform to the pattern rule, patternMismatch returns true. In terms of guiding users and technical reference, you should set the title feature in the table single control containing the pattern feature to describe the role of the rule.

4. tooLong

Objective: To avoid excessive characters in the input value.

Usage: Set the maxLength feature on the Form Control.

Example:

<input type="text" name="limitedText" maxLength="140">

Description: if the length of the input value exceeds maxLength, The tooLong feature returns true. Although the form control usually has the maximum length in the user input time limit, in some cases, such as setting through a program, it will still exceed the maximum length.

5. rangeUnderflow

Purpose: To limit the minimum value of a numeric control.

Usage: Set the min attribute for the Form Control and assign the allowed minimum value.

Example:

<input type="range" name="ageCheck" min="18">

Description: In the form control that requires a value range check, the value may be temporarily lower than the lower limit. In this case, the rangeUnderflow feature of ValidityState returns true.

6. rangeOverflow

Purpose: To limit the maximum value of a numeric control.

Usage: Set the max feature for the Form Control and assign the maximum value allowed.

Example:

<input type="range" name="kidAgeCheck" max="12">

Description: similar to rangeUnderflow, if a form control has a greater value than max, the feature returns true.

7. stepMismatch

Objective: To make sure that the input values comply with min, max, and step settings.

Usage: Set the step feature for the Form Control to specify the increment of the value.

Example:

<input type="range" name="confidenceLevel" min="0" max="100" step="5">

Description: 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 multiples of the minimum and step feature values. For example, if the value ranges from 0 to 100 and the step value is 5, 17 is not allowed. Otherwise, stepMismatch returns true.

8. customError

Objective: To handle errors caused by explicit setting and calculation of application code.

Usage: Call setCustomValidity (message) to place the Form Control in the customError state.

Example:

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

Detailed Description: When the browser's built-in verification mechanism is not applicable, the custom verification error message must be displayed. When the input value does not comply with the Semantic Rules, the application code should set these custom verification messages.

A typical use case for custom verification messages is to verify that the values in the control are consistent. For example, the values in the password and Password Confirmation boxes do not match. Once the authentication message is customized, the control is invalid and customError returns true. To clear the error, you only need to call setCustomValidity ("") on the control.

Well, the above are the 8 basic methods for Form Verification in HTML5, and hope to help beginners. We also hope that you can support the customer's home.