Regex for Email Validation in JavaScript — Practical Patterns and Edge Cases

Email validation is one of the first regex problems every JavaScript developer runs into, and also one of the most over-engineered. The truth is that no regex can fully guarantee an email address is real — but a well-chosen pattern catches typos and malformed input before you waste a signup or send an email that bounces. This guide gives you a practical pattern, explains its trade-offs, and shows how to pair it with real-world verification.

A practical email regex

^[^\s@]+@[^\s@]+\.[^\s@]+$

This breaks down into three parts: [^\s@]+ for the local part before the @ (any characters except whitespace and another @), a literal @, and [^\s@]+\.[^\s@]+ for a domain that contains at least one dot. It's permissive by design — good email validation should almost never reject a real user, and this pattern strikes that balance.

JavaScript example

function isValidEmail(email) {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email.trim());
}

console.log(isValidEmail("dev@dev-brains-ai.com"));    // true
console.log(isValidEmail("first.last+tag@sub.co.in")); // true
console.log(isValidEmail("no-at-symbol.com"));          // false
console.log(isValidEmail("user@no-dot"));                // false - no TLD

A stricter pattern for form validation

If you want to reject a few more obviously malformed edge cases — like consecutive dots or a domain starting with a hyphen — this pattern adds more structure while remaining readable:

^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$

This mirrors the character set the HTML5 spec recommends for <input type="email">and correctly handles domain labels that can't start or end with a hyphen.

React form example

function EmailField() {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");

  const handleBlur = () => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    setError(emailRegex.test(email) ? "" : "Enter a valid email address");
  };

  return (
    <div>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        onBlur={handleBlur}
      />
      {error && <p style={{ color: "red" }}>{error}</p>}
    </div>
  );
}

Edge cases worth knowing

• Plus-addressing like user+newsletter@gmail.com is valid and widely used — don't strip or reject the + character.
• Subdomains like user@mail.example.co.in are valid; your regex needs to allow multiple dot-separated segments in the domain, not just one.
• Case sensitivity: the local part is technically case-sensitive per spec, but nearly every real mail provider treats it as case-insensitive. Store emails as-is but compare them lowercase to avoid duplicate-account bugs.
• Internationalized email addresses (with non-ASCII characters) exist but are rare in practice — decide early whether your product needs to support them, since it changes the character classes significantly.

Regex is not the same as deliverability

No regex, however strict, can tell you whether an email address actually exists or can receive mail. The only reliable way to confirm that is to send a verification email and require the user to click a confirmation link — treat regex validation as a fast, cheap first filter, not the final check.

Frequently Asked Questions