Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use HTML5 to achieve form verification" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope that this "how to use HTML5 to achieve form verification" article can help you solve the problem.

HTML5 provides a patern attribute to the form element, which accepts a regular expression. When the form is submitted, this regular expression is used to validate the non-empty value in the form, and if the value of the control does not match the regular expression, a prompt box will pop up and prevent the expression from submitting. The text in the prompt box can be customized using the setCustomValidity method.

For example, in the following form, the text box only accepts the mobile phone number of the mainland, and you cannot submit anything else.

Running

XML/HTML Code copies content to the clipboard

Note that regular validation is used only for non-empty forms, and pattern will not be used if nothing is entered, so required assistance is also needed. But the hint that pops up in this code goes like this:

Only monkeys can understand such prompts! So we also need more friendly prompt text, using the setCustomValidity method to define it.

Running

XML/HTML Code copies content to the clipboard

Text.oninput=function () {

Text.setCustomValidity ("")

}

Text.oninvalid=function () {

Text.setCustomValidity ("Please do not enter the Martian cell phone number, please?")

}

The invalid event is triggered before the form submit event, and the submit of the form is not triggered if the validation fails. When submitting, it first verifies that all form elements are values. In addition to submitting, you can manually call the checkValidity method to perform validation.

In the above example, it is not good for me to directly set fixed prompts for the control. Sometimes I may need more detailed prompts, such as empty prompts, too long prompts, and non-numeric prompts when they are not numeric. These actions can be realized by setCustomValidity dynamically after program verification.

In fact, I think HTML5's API is poorly designed, although it can meet the basic needs, but it is really not very practical.

The form submission in the mobile phone page will pop up with JavaScript verification information, and the user experience is very poor, so give an example of verification with the attributes of HTML5 on the mobile phone:

XML/HTML Code copies content to the clipboard

/ / the following attributes of HTML are mainly used

/ / 1.placeholder provides prompts that describe the expected values of the input field. The prompt will be displayed when the input field is empty and will be obtained in the field

/ / disappear when you get focus

/ / the 2.required attribute states that the input field must be completed before submission.

/ / 3.pattern is a regular expression, which can be filled in directly.

This is the end of the content about "how to use HTML5 to implement form validation". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.