How to use the HTML5 pattern attribute for custom validation? (RegEx Example)

The pattern attribute of HTML5 implements browser-side input validation through regular expressions. It only acts on supported input types and matches the entire value (implicit anchoring). It needs to be used with the title to prompt the user and does not replace server-side validation.

The pattern attribute in HTML5 lets you enforce custom input validation using regular expressions—directly in the browser, without JavaScript. It works on <input> elements (except type="hidden" , "button" , "submit" , and "reset" ), and triggers a validation error if the entered value doesn't match the regex.

How pattern works with built-in validation

The pattern attribute doesn't replace other validation attributes—it complements them. Browsers check it *after* basic type-based validation (eg, type="email" or required ) but before form submission. The regex is applied to the entire input value (ie, it's implicitly anchored at both ends—like ^regex$ ).

• Use title to provide a user-friendly explanation—this appears in the default browser validation tooltip
• Pattern matching is case-sensitive by default—add the i flag inside the regex if needed (eg, pattern="[az] /i" is invalid; instead use pattern="[a-zA-Z] " or rely on Unicode property escapes where supported)
• Empty values ​​are allowed unless required is present—even if a pattern is set

Common RegEx examples for practical use

Here are real-world patterns with explanations:

• US phone number (10 digits, optional formatting) :
  <input type="text" pattern="\(?[0-9]{3}\)?[-.\s]?[0-9]{3}[-.\s]?[0-9]{4}" title="Enter a 10-digit phone number, eg, (123) 456-7890">
• Password: at least 8 chars, one uppercase, one digit, one symbol :
  <input type="password" pattern="(?=.*\d)(?=.*[az])(?=.*[AZ])(?=.*[!@#$%^&amp;*]).{8,}" title="Must be 8 chars, with uppercase, lowercase, digit, and symbol">
• Hex color code (#RRGGBB or #RGB) :
  <input type="text" pattern="#([0-9A-F]{3}|[0-9A-F]{6})" title="Enter a valid hex color like #F00 or #FF0000">

Important limitations and tips

The pattern attribute is convenient but has boundaries. It's not a replacement for server-side validation—and some regex features aren't fully supported across all browsers (especially older ones).

• Don't use complex lookaheads or Unicode categories unless you've tested in your target browsers
• Escaping in HTML attributes requires care—use \ for backslashes (eg, pattern="\\d{4}" becomes \d{4} in JS context—but most browsers accept raw \d in HTML)
• For dynamic or conditional logic (eg, “if field A is filled, then field B must match X”), stick with JavaScript— pattern only validates the current field's value
• Always pair with title —otherwise users get a generic “Please match the requested format” message

Testing and debugging patterns

Since regex behavior can vary subtly across engines, test thoroughly:

• Try valid and invalid inputs—including edge cases like leading/trailing spaces (note: pattern matches the raw value; trim manually if needed)
• Use browser DevTools to inspect the element and trigger validation via reportValidity() in console
• Validate server-side with the same logic—never trust client-side only

The above is the detailed content of How to use the HTML5 pattern attribute for custom validation? (RegEx Example). For more information, please follow other related articles on the PHP Chinese website!