HTML5 Customizing validation information

H5 adds a number of types, and attributes, to the form.

Based on these new types and attributes H5 also provides us with a JS function to validate these data, the functions of these validation forms are in the Validitystate object , let's take a look at the use of these functions:

Validitystate Object

The Validitystate object is obtained through the validity property, which has 8 properties, respectively, for 8 aspects of error validation, and the property values are all Boolean values.

1. Valuemissing Property

The value of the required form element is empty.

Required if the form element has the required attribute set. If the value of the required entry is NULL, it cannot be validated by the form, and the Valuemissing property returns True, otherwise false.

<input id= "INP1" type= "text" value= "foo" required/><input id= "inp2" type= "text" value= "required/>< Script type= "Text/javascript" >    document.getElementById (' Inp1 '). validity.valuemissing;//false    document.getElementById (' Inp2 '). validity.valuemissing; True</script>

2. Typemismatch Property

The input value does not match the type.

HTML 5 new form types such as email, number, url, and so on, all contain an original type validation. If the user enters content that does not conform to the form type, the Typemismatch property returns True, otherwise false is returned.

<input id= "inp1" type= "url" value= "http://foo.com"/><input id= "inp2" type= "url" value= "foo"/><input ID = "INP3" type= "email" value= "[email protected]"/><input id= "inp2" type= "email" value= "bar"/><script type= " Text/javascript ">    document.getElementById (' Inp1 '). Validity.typemismatch;//false    document.getElementById (' Inp2 '). Validity.typemismatch; True    document.getElementById (' inp3 '). Validity.typemismatch;//false    document.getElementById (' inp2 '). Validity.typemismatch; True</script>

3. Patternmismatch Property

The input value does not match the regular pattern attribute.

Table cells can set the validation mode for regular expressions by using the pattern attribute. If the input does not conform to the validation mode rule, the Patternmismatch property returns True, otherwise false is returned.

<input id= "INP1" type= "text" value= "1234"/><input id= "inp2" type= "text" value= "" pattern= "[A-z]{2}"/>< Script type= "Text/javascript" >   document.getElementById (' Inp1 '). Validity.patternmismatch;  False   document.getElementById (' inp2 '). Validity.patternmismatch;  True</script>

4. Toolong Property

The input exceeds the character length that is qualified by the MaxLength attribute of the form element.

Table cells can use the MaxLength attribute to set the maximum length of the input content. Although the length of the form content is restricted at the time of entry, the maximum length limit is exceeded in some cases, such as through program settings. If the input exceeds the maximum length limit, the Toolong property returns True, otherwise false is returned.

<!--Toolong:true identifies if the value of the node is longer than the MaxLength property. All browsers will prevent users from entering content that exceeds the maximum length value. --><input id= "INP1" type= "text" value= "A" maxlength= "1"/><input id= "inp2" type= "text" value= "AB" maxlength = "1"/><script type= "Text/javascript" >    document.getElementById (' Inp1 '). Validity.toolong;//false    document.getElementById (' inp2 '). Validity.toolong;//true in Opera, false in other supported browsers .</script>

5. Rangeunderflow Property

The value entered is less than the value of the Min attribute.

Form elements, which are generally used to fill in numeric values, may use the Min attribute to set the minimum value for a range of values. If the value entered is less than the minimum value, the Rangeunderflow property returns True, otherwise false is returned.

<input id= "INP1" type= "number" value= "3" min= "2"/><input id= "inp2" type= "number" value= "1" min= "2"/>< Script type= "Text/javascript" >    document.getElementById (' Inp1 '). Validity.rangeunderflow;//false    document.getElementById (' Inp2 '). Validity.rangeunderflow; True</script>

6. Rangeoverflow Property

The value entered is greater than the value of the Max attribute.

Form elements that are typically used to fill in numeric values, or you might use the Max attribute to set the maximum value for a range of values. If the value entered is greater than the maximum value, the Rangeoverflow property returns True, otherwise false is returned.

<input id= "INP1" type= "number" value= "1" max= "2"/><input id= "inp2" type= "number" value= "3" max= "2"/>< Script type= "Text/javascript" >    document.getElementById (' Inp1 '). Validity.rangeoverflow;//false    document.getElementById (' Inp2 '). Validity.rangeoverflow; True</script>

7. Stepmismatch Property

The value entered does not conform to the rules derived from the step characteristics.

Form elements used to fill in numeric values may require the Min, max, and step characteristics to be set at the same time, which limits the value entered must be the sum of the minimum value and a multiple of the step attribute value. If the range is from 2 to 6,step, the value of the attribute is 2, because the valid value is the even number in that range, and no other value can pass validation. If the input value does not meet the requirements, the Stepmismatch property returns True, otherwise false is returned.

<input id= "INP1" type= "number" value= "4" min= "2" max= "6" step= "2"/><input id= "inp2" type= "number" value= "3" min = "2" max= "6" step= "2"/><script type= "Text/javascript" >    document.getElementById (' Inp1 '). Validity.stepmismatch; False    document.getElementById (' inp2 '). Validity.stepmismatch;//true</script>

8. Customerror Property

Use a custom validation error message.

Sometimes, it is not appropriate to use the browser's built-in validation error message and you need to define it yourself. Custom error messages are prompted when the input values do not conform to the semantic rules.

You typically use the Setcustomvalidity () method to customize the error message: setcustomvalidity (message) customizes the error message to message, at which point the Customerror property value is True The Setcustomvalidity ("") clears the custom error message, at which point the Customerror property value is false.

<input id= "INP1" type= "text"/><input id= "inp2" type= "text"/><script type= "Text/javascript" >    document.getElementById (' Inp1 '). Validity.customerror; False    document.getElementById (' inp2 '). Setcustomvalidity (' Invalid ');    document.getElementById (' Inp2 '). Validity.customerror; True</script>

Checkvalidity

The return is also a Boolean value that is returned true by validation, otherwise false is returned.

This method acts on the form form, and the accuracy of the verification is still to be considered.

<form id= "Profileform" name= "Profileform" >    <input type= "text" id= "FirstName" Required>    < Input type= "button" id= "Testbutton" value= "Test" ></form><script>var form = document.getElementById (' Profileform '),    SUBMITB =  document.getElementById (' Testbutton ');

Submitb.onclick=function () {

Alert (form.checkvalidity ());

}

</script>

Setcustomvalidity

Custom error message. Use the instance code in the customerror method.

HTML5 Customizing validation information