HTML5 form validation guide

Form verification can improve efficiency through HTML5 native mechanism. 1. Use the required attribute to ensure the required fields; 2. Use the input type (such as email, number) and pattern attributes to verify the data format; 3. Use the setCustomValidity() method and CSS to adjust the error prompts and styles to optimize the user experience.

Form verification is an indispensable part of web development, especially when users register, log in or submit information. HTML5 provides some native form verification mechanisms that can reduce dependence on JavaScript and improve user experience and development efficiency. Here are some practical tips to help you better use HTML5 form validation.

Required fields: required attribute

If you want a field to be filled in, you can add required attribute to the corresponding input element. This property tells the browser that the field cannot be empty until the user submits the form.

For example:

 <input type="text" name="username" required>

The browser will prompt an error when the user tries to submit a null value. Note that the prompt styles of different browsers may be slightly different, but the functions are consistent. If you want to unify the prompt style, you may need to customize it in combination with JavaScript or CSS.

Data type verification: input type and pattern attributes

HTML5 introduces a variety of input types, such as email , url , number , etc., which will automatically perform basic data format checks.

For example:

 <input type="email" name="email">

This will ensure that the user enters a legal email address format. If the standard type cannot meet the needs, you can use pattern attribute and regular expression to define more complex rules:

 <input type="text" name="zipcode" pattern="\d{6}" title="Please enter the 6-digit zip code">

Here, you need to enter a 6-digit zip code and give a prompt message through title .

A few points to note:

• Regular expressions do not require slashes / wraps
• Different browsers have slightly different support for pattern, so it is recommended to perform compatibility testing.
• Mobile devices may pop up different keyboards according to input type (such as email keyboard)

Custom error prompts and style adjustments

By default, the browser's error prompts are relatively simple and sometimes do not conform to the product design style. Although the prompt content cannot be completely replaced (because of browser restrictions), the verification logic and error messages can be customized through setCustomValidity() method.

For example:

 document.querySelector('form').addEventListener('submit', function(e) {
  var password = document.getElementById('password');
  if (password.value.length < 6) {
    password.setCustomValidity(&#39;Password is at least 6 digits&#39;);
    e.preventDefault();
  }
});

In addition, you can use CSS to beautify the input box style when verification fails:

 input:invalid {
  border-color: red;
}

However, it should be noted that :invalid pseudo-class will take effect when the page is loaded, which may cause the user to see the red border before entering, affecting the experience. Styles can be applied only after submission through JavaScript.

Basically that's it. Although HTML5 form verification is simple, it can significantly improve user experience and development efficiency if used properly. It is not complicated but easy to ignore that sometimes we rely too much on JavaScript and ignore native capabilities.

The above is the detailed content of HTML5 form validation guide. For more information, please follow other related articles on the PHP Chinese website!