HTML5 Advanced -3 HTML5 Form validation (validation properties, validation status)

First, verify the properties

Required Property

-The Required property primarily prevents the form from being submitted when the domain is empty. This property does not need to set any value

Syntax

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7E/36/wKioL1b5_eiAoPSQAAB26_pzIq4604.png "title=" Web.png "alt=" Wkiol1b5_eiaopsqaab26_pziq4604.png "/>

Pattern Property

-The function of the Pattern attribute is to implement element validation. It supports the use of regular expressions to customize validation rules

Syntax

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7E/3A/wKiom1b5_zqxnUReAACnxcegIY4750.png "title=" Web.png "alt=" Wkiom1b5_zqxnureaacnxcegiy4750.png "/>

Min and Max Properties

-Min, Max, and step properties are used to specify a qualification (constraint) for input types that contain numbers or dates

Syntax

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7E/36/wKioL1b6APrjZTlQAADiapQFUqU562.png "title=" Web.png "alt=" Wkiol1b6aprjztlqaadiapqfuqu562.png "/>

Minlength and Maxlength Properties

-The Minlength and Maxlength properties are the minimum number of characters and the maximum number of characters allowed for a custom element

Syntax

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/7E/3A/wKiom1b6AYXDkNu5AAAcLHWljBY701.png "title=" Web.png "alt=" Wkiom1b6ayxdknu5aaaclhwljby701.png "/>

Validity property

-A validity property is provided in the new feature provided by HTML5 for form validation. This property is used to describe the valid state of the specified element using the Validitystate object

-The Validitystate object represents a valid state and can be used to validate the constraint of the specified element. This object provides a series of properties that describe the valid state of a specified element

-How to get the Validitystate object, using its provided property content

-Syntax: Specifies the element. Validity can get Validitystate object

-Example: Elem. Validity. Valid

Second, verify the status

Valid status

-After execution, we get a Boolean value that indicates whether the form control has passed all validation constraints. The valid feature can be seen as the final verification result: If all constraints are passed, the value of valid is true, otherwise the value of valid is False if one of the constraints does not pass.

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/7E/36/wKioL1b6DE6wF5JQAAA95_bCUL0830.png "title=" Web.png "alt=" Wkiol1b6de6wf5jqaaa95_bcul0830.png "/>

Valuemissing status

-If the form control has the required attribute set, the control will remain in an invalid state until the user fills in or fills in the value by code call. For example, an empty text input box cannot pass a required check unless you enter any text in it. Valuemissing returns True when the input value is empty

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7E/36/wKioL1b6EBuCbuoRAABFQOXFHnw676.png "title=" Web.png "alt=" Wkiol1b6ebucbuoraabfqoxfhnw676.png "/>

Typemismatch status

-If the input syntax does not conform to the specified type, then this state is true

-for example: the content of an email type INPUT element is not an e-mail address

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/36/wKioL1b6EO3wM3bJAABBwinkjO4411.png "title=" Web.png "alt=" Wkiol1b6eo3wm3bjaabbwinkjo4411.png "/>

Patternmismatch status

-If the input does not match the set mode, then this state is true

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/3A/wKiom1b6EV3BRJaUAABGaSup4eM461.png "title=" Web.png "alt=" Wkiom1b6ev3brjauaabgasup4em461.png "/>

Toolong status

-If the input length is greater than the value specified by the MaxLength property, then this state is true

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7E/3A/wKiom1b6EZWBIGtLAABGe9sfEOo734.png "title=" Web.png "alt=" Wkiom1b6ezwbigtlaabge9sfeoo734.png "/>

Rangeunderflow status

-If the input is less than the value declared by the min attribute, then this state is true

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7E/36/wKioL1b6EsvBF_2YAABFO0lPO8k675.png "title=" Web.png "alt=" Wkiol1b6esvbf_2yaabfo0lpo8k675.png "/>

Stepmismatch status

-If the given value is inconsistent with min,max,step, then this state is true

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7E/3A/wKiom1b6EpSB4fYXAABB8hj8dqY788.png "title=" Web.png "alt=" Wkiom1b6epsb4fyxaabb8hj8dqy788.png "/>

Customerror status

-If the element uses the Setcustomvalidity () method to set a custom error, then this state is true

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/7E/36/wKioL1b6FFqRZLljAABggVWHk10749.png "title=" Web.png "alt=" Wkiol1b6ffqrzlljaabggvwhk10749.png "/>

Summary: This chapter mainly introduces the following HTML5 form validation (validation properties, validation status)

This article from the "Technical Exchange" blog, declined reprint!

HTML5 Advanced -3 HTML5 Form validation (validation properties, validation status)