Form Field Validation Pattern Generator
Pick a field type and get a ready-to-use regular expression, HTML pattern attribute, and JS snippet — then test it live against your own input.
Practical email check — accepts plus-addressing and subdomains, rejects spaces and missing parts.
/^[^\s@]+@[^\s@]+\.[^\s@]+$/
pattern="[^\s@]+@[^\s@]+\.[^\s@]+"
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!re.test(value)) {
// value is invalid
}What a validation pattern does
A validation pattern is a regular expression that describes the exact shape a field value is allowed to take. Attach one to an email, phone, postal code, or password field and the browser can reject malformed input before the form is ever submitted.
This generator gives you a tested regular expression for fourteen common field types, in three ready-to-paste formats: the raw regex, an HTML pattern attribute, and a JavaScript snippet.
Using the HTML pattern attribute
The simplest way to apply a pattern is the HTML pattern attribute — <input type="text" pattern="...">. The browser blocks submission whenever the value doesn't match, with no JavaScript required.
The pattern attribute is implicitly anchored, so the copy here drops the leading ^ and trailing $. For richer, real-time feedback, use the JavaScript form and test the value yourself as the user types.
Client-side validation is never enough
Regex validation in the browser is for fast, friendly feedback — it lifts completion rates by catching typos early. It is not a security control: a pattern attribute can be bypassed in seconds, so every field must be validated again on the server.
SimilarForm validates all 18 of its field types on both sides automatically, so for a real form you can skip the regex wiring entirely.
Questions & answers
How do I use the HTML pattern attribute?+
Add it to a text input: <input type="text" pattern="...">. The browser blocks form submission when the value doesn't match. The pattern attribute is implicitly anchored, so no ^ or $ is needed.
Are these regular expressions strict or lenient?+
They're deliberately practical — strict enough to catch real mistakes, lenient enough not to reject valid edge cases. The email pattern, for example, accepts plus-addressing and subdomains.
Should client-side validation be my only check?+
No. Regex validation in the browser is for fast feedback and good UX. Always validate again on the server — a pattern attribute can be bypassed.
Does anything get sent to a server?+
No. The patterns are a static library, and your test input is matched locally with the browser's own regex engine.
Skip the regex entirely.
SimilarForm validates email, phone, address, and 15 other field types out of the box — no pattern attributes to wire up. Free to start.