Example of HTML5 form client validation

In the past, for client-side form validation, it was usually a JavaScript validation script that either wrote it yourself or used a third-party library. In HTML5, a set of client-side authentication methods are provided, and only the common error-checking rules can be embedded in the <input> field.

1,required Property-Indicates that the field cannot be empty

(Note: The browser does not perform validation until the user clicks the Submit button to submit the form.) Currently, the HTML5 does not support specifying the time for validation, and the validation message style is not the same as the content of each browser, and cannot be modified. ）

<form action= "#" >
<input type= "Text" required/>
<input type= "Submit" value= "submitted" >
</form>

2, two ways to turn off validation

(1) Add the Novalidate property to the <form> element to disable validation of the entire form

<form action= "#" novalidate>

(2) or add Formnovalidate property to the Submit button

<input type= "Submit" value= "submitted" formnovalidate>

3, modify the text box validation style
Although we cannot modify the style of the validation messages, we can verify the results to change their appearance based on the input fields.
A few new CSS pseudo classes are used here:
Required (required) and optional (optional): Apply a different style depending on whether the required property is used in the field.
Valid (valid) and invalid (invalid): Applies a different style depending on whether the control contains errors.
In-range (within range) and Out-of-range (out of range): Determines whether an input value is out of range based on the Min and Max properties of the control.

For example, you want to apply a light yellow background to a required <input> element, and a field with an orange background that is required and currently enters an invalid value.

input:required {
Background-color:lightyellow;
}

Input:required:invalid {
Background-color:orange;
}

4,pattern Property-use regular expression validation
(1) It is not necessary to use the ^ and $ characters to indicate that the field is worth the start and end.
(2) If only pattern is set, the null value will also pass. If NULL is not allowed, add the required property.

For example: use regular expressions to verify phone numbers

<input type= "text" title= "Enter 11 valid cell phone number" pattern= "1[0-9]{10}" required/>

5, custom validation

For a specific field if regular expression validation is not enough, you can write custom validation logic and take advantage of the HTML5 validation mechanism.
The Setcustomvalidity () method is usually used to provide an error message that the browser will use as its own built-in message. When you submit a form, you see a pop-up balloon that contains a custom error message.

For example: Verify that the input content must not be less than 20 characters

<script>
function validatecomments (input) {
if (Input.value.length < 20) {
Input.setcustomvalidity ("Comments shall not be less than 20 words");
}else{
No mistakes. Clear any error messages
Input.setcustomvalidity ("");
}
}
</script>

<form action= "#" >
<input type= "text" oninput= "validatecomments (This)"/>
<input type= "Submit" value= "submitted" >
</form>