Form Input Patterns & Regex Cheatsheet
Copy-paste regex for email, phone, and URL fields, with a live tester for the HTML pattern attribute.
Copy-paste regular expressions for the fields you actually use — email, phone, URL, postcodes — and test them live below. Each pattern is written for the HTML pattern attribute, and clicking one loads it into the tester.
Live pattern tester
Matches
| Field | Pattern | Notes | |
|---|---|---|---|
| Pragmatic email check. Prefer type="email"; use this only for an extra hint. | Pragmatic email check. Prefer type="email"; use this only for an extra hint. | ||
| Phone (intl) | Loose international phone — digits, spaces, and common separators. | Loose international phone — digits, spaces, and common separators. | |
| URL (http/https) | Requires a scheme and a dot. Prefer type="url" for full parsing. | Requires a scheme and a dot. Prefer type="url" for full parsing. | |
| US ZIP | Five digits with an optional +4 extension. | Five digits with an optional +4 extension. | |
| UK postcode | Covers standard UK postcode formats. | Covers standard UK postcode formats. | |
| Slug / username | Lowercase letters, numbers, single hyphens between words. | Lowercase letters, numbers, single hyphens between words. | |
| Hex colour | Three- or six-digit hex, hash optional. | Three- or six-digit hex, hash optional. | |
| Strong password | At least 8 chars with a lower, an upper, and a digit. | At least 8 chars with a lower, an upper, and a digit. |
Using a pattern
Drop the expression into a pattern attribute and add a title that describes the format — the browser shows it when validation fails. For the full picture on native validation and humane error UX, read the form validation guide, and make sure your error states are accessible.
Frequently asked questions
How does the HTML pattern attribute work?
The pattern attribute takes a regular expression and blocks form submission until the input matches it. The browser anchors the pattern to the whole value automatically, so you don’t write ^ and $ yourself. Pair it with a title attribute to explain the expected format.
What is the best regex for email validation?
There isn’t a single perfect email regex — the real spec is enormous. For forms, use type="email" for the real check and, if you want an extra hint, a pragmatic pattern like the one in the cheatsheet. Always confirm deliverability by actually emailing the address.
Why does my pattern work here but not in the form?
The HTML pattern attribute is implicitly anchored to the entire value, so a partial match that passes a normal regex test will fail in the browser. This tester anchors with ^…$ to mirror that behaviour exactly.
Is client-side pattern matching secure?
No. Patterns improve UX but can be bypassed, so always validate again on the server. SaveForm validates and stores submissions server-side regardless of what the browser allowed through.
Related resources
Validate in the browser, store it clean
Patterns guide your users; SaveForm validates and stores every submission server-side so bad data never reaches you.