Form verification can be achieved through HTML5's required and pattern properties. 1. requires to ensure that the field is not empty, and is suitable for text boxes, drop-down boxes, password boxes, etc.; 2. Pattern checks the format through regular expressions, such as mobile phone number, postal code, etc.; 3. The two are often used together. requires first verify whether it is empty, and then the pattern determines whether the format is correct; 4. Example: The user name input box uses pattern to restrict the combination of 4-10 letters and numbers and sets the required attribute.

Form verification is a very important part of web development, especially when users submit information. HTML5 provides some native properties to help us more easily implement basic form validation, where required and pattern are the two most commonly used and practical.

Required verification: Use the required attribute

If you want an input box to be empty, just add the required property. The browser will automatically check whether these fields are filled in when the user tries to submit the form.

For example:

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

In this way, if the user does not enter anything in the username input box, the browser will prompt a default message such as "Please fill in this field". The prompts displayed by different browsers may vary slightly, but the behavior is consistent.

Tips: required is not only suitable for text input boxes, but also supports <select> , <textarea> , and various types of <input> , such as email, number, etc.

Format verification: Use pattern to match regular expressions

Sometimes we not only require users to fill in the content, but also require them to fill in it in a specific format, such as mobile phone number, postal code, password rules, etc. At this time, you can use pattern attribute and regular expressions to complete it.

For example, users must enter passwords that combine 6 to 8 letters and numbers:

 <input type="password" name="password" pattern="[A-Za-z0-9]{6,8}" required>

A few points to note:

• pattern is only valid for <input type="text"> and its variants (such as password, search).
• Regular expressions do not need to write the beginning and ending / , just write the matching rules directly.
• If the user input does not comply with the rules, the browser will also pop up.

Common usage examples:

• Mobile phone number: pattern="1[3-9]\d{9}"
• Email: Although you can write the rules yourself, it is actually easier to use type="email" directly
• Username only allows letters and underscores: pattern="[A-Za-z_] "

Notes on using required and pattern in combination

These two attributes often appear together, such as the username or password field in the registration page. There will be no conflict between them, and there are no special order requirements, but the following points should be paid attention to:

• required ensures that the field is not empty
• pattern is formatted on the basis of non-empty fields
• If the field is empty but pattern is set, the browser will not verify the regular part because it has not reached that step yet.

To give a complete example:

 <form>
  <label>Username (4-10 alphanumeric):</label>
  <input type="text" name="username" pattern="[A-Za-z0-9]{4,10}" required>
  <button type="submit">Submit</button>
</form>

This ensures that the user has not only filled in the content but also meets the format requirements.

Basically that's it. The rational use of required and pattern can greatly reduce the workload of front-end verification. Although they cannot replace back-end verification, they do add a lot of points to user experience.

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