For details

Before the deep discussion of the form verification, let's think about the true meaning of the form verification of the form. As far as its core is concerned, form verification is a system that detects invalid control data for end users and mark these errors. In other words, form verification is to conduct a series of inspections on it before submitting the server and notify users to correct their errors.

But what is the real form verification?

It is an optimization.

The reason why the form verification is a optimization is because it is not enough to ensure that the form data submitted to the server only through the form verification mechanism is correct and effective. On the other hand, the design form verification is to make Web applications throw an error faster. In other words, it is best to use the built -in processing mechanism of the browser to inform the user's webpage containing an invalid form control value. In the past, the data turned around on the Internet just to let the server notify the user that he had entered the wrong data. If the browser is completely capable of being captured before leaving the client, then we should use this advantage.

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

Having said that, HTML5 still introduces eight methods to verify the data correctness of the form control. Let's take a look at it in order, but let's introduce the valueState object for feedback to verify the status.

In a browser that supports HTML5 form verification, you can access the ValidityState object through the form control:

 var value = document.myform.myinput.validity;

This line of code obtained a ValidityState object called Myinput. The object contains the reference to all eight verification status and the final verification results.

The call method is as follows:

 Valcheck.valid

After the execution, we will get a Boolean value that indicates whether the form control has passed all the verification constraints. You can treat the value characteristics as the final verification result: If all eight constraints are passed, the value characteristics are true, otherwise, as long as there is a constraint that fails, the value logo is all S.

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

Purpose: Make sure the value in the form control has been filled in.

Usage: In the form control, set the Required features to true.

Example:

 <input type = text name = mytext required>

Detailed instructions: If the form control sets the required feature, the control will always be invalid before the user fills in or fills the value by the code call. For example, the empty text input box cannot pass the required check, unless entering any text in it. When the input value is empty, ValueMissing returns true.

Objective: To ensure the matching of control values ​​and expected types (such as Numbe, Email, URL, etc.).

Usage: Specify the Type characteristic value of the form control.

Example:

 <input type = email name = myemail>

Detailed instructions: The special form control type is not just used to customize the mobile phone keyboard. If the browser can identify the input in the form control in the form control, the type of rules do not meet the corresponding types, such as the@symbol in the email address, or the input value of the Number -type control is not Effective numbers, then the browser will mark this control to indicate that the type is not matched. No matter what errors, TypeMISMATCH will return to True.

Purpose: Verify whether the input is valid according to the format rules set on the form control.

Usage: Set the pattern features on the form control, and the well gives appropriate matching rules.

Example:

 <input type = text name = creditcardnumber pattern = [0-9] {16} target = '_lank'> regular expression verification mechanism. When the Pattern features are set to the control, as long as the value of the input control does not meet the mode rules, the PatternMISMATCH will return the True value. From two aspects of guiding users and technical references, you should set the title characteristics in the form control containing the pattern characteristics to explain the rules.
 4. TOOLONG
 Purpose: Avoid the input value containing too many characters.
 Usage: Set the MaxLength characteristics on the form control.
 Example:
 <input type = text name = limiteddtext maxlength = 140>
 Detailed description: If the length of the input value exceeds MaxLength, the Toolong feature will return True. Although the form control is usually limited to the maximum length when the user is input, in some cases, such as the program settings, it will still exceed the maximum value.
 5. Rangeunderflow
 Purpose: Limit the minimum value of numerical control.
 Usage: Set the min feature for the form control and give the allowable minimum value.
 Example:
 <input type = range name = Agecheck min = 18>
 Detailed instructions: In the form control that needs to be checked, the value is likely to temporarily be lower than the lower limit of the settings. At this time, the RangeunderFlow feature of ValidityState will return to True.
 6. Rangeoverflow
 Purpose: Limit the maximum value of numerical control.
 Usage: Set the MAX characteristics for the form control and give the maximum value.
 Example:
 <input type = range name = kidagecheck max = 12>
 Detailed description: Similar to Rangeunderflow, if the value of a form control is larger than MAX, the characteristics will return True.
 7. Stepmismatch
 Purpose: Make sure that the input value meets min, max, and STEP.
 Usage: Set the STEP characteristics for the form control, specify the increase of the value.
 Example:
 <input type = range name = confidenceLevel min = 0 max = 100 step = 5>
 Detailed description: This constraint is used to ensure that the value meets the requirements of MIN, MAX, and Step. In other words, the current value must be the sum of the multiple of the minimum value and the STEP feature value. For example, from 0 to 100, the STEP feature value is 5, at this time there will be no 17, otherwise the Stepmismatch will return the True value.
 8. Customerror
 Objective: Delivery the application code clearly set and calculate errors.
 Usage: Call SetCustomValidity (MESSAGE) to place the form control parts in the Customerror state.
 Example:
 passwordConfirmativefield.setCustomValidity (Password Values ​​do not match.);
 Detailed instructions: When the verification mechanism of the browser is not applicable, the custom verification error information needs to be displayed. When the input value does not meet semantic rules, the application code should set these custom verification messages.
 The typical case of customized verification message is to verify whether the values ​​in the control control are consistent. For example, passwords and passwords confirm that the values ​​of the two losers are not matched. As long as the verification message is customized, the control will be in an invalid state, and the Customerror will return True. To remove the error, just call the setcustomValidity () on the control.
 Well, the above is the 8 basic methods verified by the table alone in HTML5. I hope it will be helpful to beginners. I also hope that everyone will support VEVB Wulin.com.