Simple Example of HTML5 form verification, html5 form example

Simple Example of HTML5 form verification, html5 form example
This article mainly introduces a simple example of using HTML5 form verification, including a small example of using a mobile phone. For more information, see

HTML5 provides the patern attribute for form elements. It accepts a regular expression. When a form is submitted, this regular expression is used to verify non-empty values in the form. If the value of the control does not match this regular expression, a prompt box is displayed, and the expression submission is blocked. The text in the prompt box can be customized using the setCustomValidity method.
For example, in the following form, the text box only accepts mobile phone numbers from the Chinese mainland, and cannot be submitted if you enter anything else.
Run

Copy XML/HTML Code to clipboard

1. <! DOCTYPE html>
2. <Form>
3. <Input id = "text" pattern = "^ 1 [3-9] \ d {9} $" required/>
4. <Input id = "button" type = "submit"/>
5. </Form>

Note that only non-empty forms use regular expression verification. If nothing is input, pattern will not be used. Therefore, required is required. However, the pop-up prompt for this code is as follows:

Only monkeys can understand the prompt text! Therefore, we need more friendly prompt text, which is defined using the setCustomValidity method.
Run

Copy XML/HTML Code to clipboard

1. <! DOCTYPE html>
2. <Form>
3. <Input id = "text" pattern = "^ 1 [3-9] \ d {9} $" required/>
4. <Input id = "button" type = "submit"/>
5. </Form>
6. <Script>
7. Text. oninput = function (){
8. Text. setCustomValidity ("");
9. };
10. Text. oninvalid = function (){
11. Text. setCustomValidity ("do not enter the mobile phone number of Mars? ");
12. };
13. </Script>

The invalid event is triggered before the form submit event. If the verification fails, the form submit is not triggered. When submitting the Statement, the system first verifies whether all form elements are valid values. In addition to submission, you can also manually call the checkValidity Method for verification.
In the above example, the prompt for setting a fixed control is not very good. Sometimes more detailed prompt information may be required, for example, if the blank prompt is blank, the prompt is too long when it is too long, or if it is not a number, the prompt is not a number. These actions can be dynamically implemented through setCustomValidity after program verification.
In fact, I think the HTML5 API is poorly designed. Although it can meet basic requirements, it is not practical.

In the mobile phone page, a window will pop up for form submission and JavaScript verification. The user experience is very poor. Therefore, an example of HTML5 attribute verification on the mobile phone is provided:

Copy XML/HTML Code to clipboard

1. <Input id = "name" name = "name" placeholder = "name" required = "" tabindex = "1" type = "text">
2. <Input id = "email" name = "email" placeholder = "telephone" required = "" tabindex = "2" type = "text" pattern = "(^ (\ d {3, 4 }-)? \ D {7, 8}) $ | ^ (13 | 15 | 18 | 14) \ d {9} $ ">
3. <Input id = "subject" name = "subject" placeholder = "example@domain.com" required = "" tabindex = "2" type = "text">
4. // Mainly uses the following HTML attributes
5. // 1. placeholder provides prompt information that describes the expected value of the input field. This prompt will be displayed when the input field is blank and
6. // Disappears when the focus is obtained
7. // 2. The required attribute must be specified before submission.
8. // 3. pattern is a regular expression, which can be entered directly.