The pattern attribute of HTML5 verifies the input format through regular expressions. Common scenarios include: 1. The password requires at least uppercase and uppercase letters, numbers and no less than 8 digits in length, pattern="(?=.\d)(?=.[az])(?=.*[AZ]).{8,}"; 2. Phone number such as 123-456-7890 format, pattern="\d{3}-\d{3}-\d{4}" or more flexible; 3. Email address restricts domain name suffix, pattern="[a-zA-Z0-9._% -] @[a-zA-Z0-9.-] .[a-zA-Z]{2,}"; 4. Custom username rules, such as starting with letters and underscores with alphanumeric characters, with a total length of at least 6 characters, pattern="A-Za-z{5,}". Note that front-end verification cannot replace back-end verification.

In form verification, HTML5's pattern attribute is very practical, especially when restricting user input formats. It uses a regular expression (regex) to determine whether the input meets expectations. Below are some common usage scenarios and corresponding regular expression examples, suitable for direct copying and adjustments as needed.

Password format requirements

Many websites have specific requirements for passwords, such as including at least uppercase and uppercase letters and numbers, and the length is no less than 8 digits. The following pattern can be used:

 <input type="password" pattern="(?=.*\d)(?=.*[az])(?=.*[AZ]).{8,}" />

This rule means:

• (?=.*\d) means at least one number
• (?=.*[az]) means at least one lowercase letter
• (?=.*[AZ]) means at least one capital letter
• .{8,} means that the total length is at least 8 characters

Note: HTML5 pattern does not support abbreviation syntax such as \d may have problems with some browsers. For compatibility, it can be written as [0-9] and [a-zA-Z] .

Phone number format

The format of the phone number varies by region, but if you only need a simple American style (like 123-456-7890), you can write it like this:

 <input type="tel" pattern="\d{3}-\d{3}-\d{4}" />

Or allow more flexible forms such as brackets and spaces:

 <input type="tel" pattern="$$?\d{3}$$?[-.\s]?\d{3}[-.\s]?\d{4}" />

This can match formats like (123) 456-7890 or 123.456.7890 .

Email address verification

Although HTML5 native type="email" has been basically verified, if you want to further control the format (for example, only certain domain name suffixes are allowed), you can add pattern:

 <input type="email" pattern="[a-zA-Z0-9._% -] @[a-zA-Z0-9.-] \.[a-zA-Z]{2,}" />

This regex matches the standard mailbox format and ensures that the domain name has at least two letters, such as .com or .net .

Custom username rules

Sometimes you want the username to be composed of letters, numbers, and underscores and start with letters:

 <input type="text" pattern="[A-Za-z][A-Za-z0-9_]{5,}" />

express:

• The first character must be a letter
• Subsequent can be letters, numbers or underscores
• Total length is at least 6 characters (including the first letter)

These regular expressions can be used directly in your HTML form or combined with JavaScript for more complex verification. However, remember that front-end verification cannot replace back-end verification, and the server side must also check for security reasons.

Basically all that is it, just choose as needed.

The above is the detailed content of HTML5 form input validation patterns (regex) examples. For more information, please follow other related articles on the PHP Chinese website!