Copyright: Attribution, allow others to create paper-based, and must distribute paper (based on the original license agreement with the same license Creative Commons )
Previous form validation can be done by JavaScript, HTML5 and later increased input validation attributes, so only a simple calibration set these attributes to complete client-side validation.
<1>, using the parity check is performed Properties
The new HTML5 form controls several properties check, check the following attributes:
- required: This attribute specifies the form control must be completed, the value of the property must be required property values or omitted entirely,
<input name="name" type="text" required />- pattern: This attribute specifies the value of the form control must meet the specified regular expression, the value of the property must be a valid regular expression.
<input name="code" type="text" required pattern="[0-9]{6}"/>- min, max, step: three for only the value type, date type of <input /> element effective, three attribute values of the control form control must be between min ~ max, and in accordance with step step.
<input name="price" type="number" min="20" max="150" step="5"/>- type: This attribute specifies the type of form controls, such as setting a good type = "number", then the input value is not a valid number, the browser will put this control flagged to alert type mismatch.
<input name="type" type="email" />- maxLength: This attribute specifies the form control input values of length, usually in the form control is to limit the length of the user input, but sometimes, as set by a program, or will exceed the maximum length.
<input type="number" maxlength="10"/>Using the above these properties can easily form a complete check.
<Two>, the method calls for verification checkValidity
Enter the verification performed by verifying property simple and easy to use. But developers want to use a dialog box to pop up an error message, or have other verification requirements, they can be verified by means of HTML to the form, form controls provided checkValidity () method.
- Returns true if the object invokes the form checkValidity () method, indicating that all forms in the form controls are valid, as long as there can not be any of a form control input checkValidity check, the form object () method returns false.
- If the form object calls checkValidity () method returns true, it indicates that the input form control by check; otherwise false.
<Three>, custom error
If we want to "create" your own error message instead of displaying the default message appears, it may be implemented by HTML5 form controls for the new setCustomValidity () method, which requires accepts a string argument, the string as a user would "custom" error.
Just call the setCustomValidity a form control () method, it means that the form controls they do not, so only when the form controls to call this method when they do not,