Email Regex Javascript Validator

What is Email Regex?

Email regex is a regular expression designed to check if a string matches the format of a valid email address, like user@example.com.

It helps ensure:

• The local part (before @) is valid

• The domain (after @) is correctly structured

• The email uses allowed characters and TLDs

Email Regex Pattern in JavaScript

Here’s a commonly used pattern for basic email validation:

/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/

Pattern Breakdown:

• ^[a-zA-Z0-9._%+-]+ → Local part (username)

• @ → Literal at symbol

• [a-zA-Z0-9.-]+ → Domain name

• \.[a-zA-Z]{2,}$ → Top-level domain (e.g., .com, .org)

Code Example 1 – Basic Email Validation

const email = "hello@example.com";
const pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

console.log(pattern.test(email)); // true

Code Example 2 – Validate Multiple Emails

const emails = ["admin@gmail.com", "user@site.co", "invalid@.com"];

const isValidEmail = (email) => /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email);

emails.forEach(email => {
  console.log(`${email} → ${isValidEmail(email)}`);
});

Code Example 3 – Real-Time Validation in a Form

<input type="text" id="emailInput" placeholder="Enter your email">
<p id="message"></p>

<script>
  document.getElementById("emailInput").addEventListener("input", function () {
    const email = this.value;
    const pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    document.getElementById("message").textContent =
      pattern.test(email) ? "✅ Valid Email" : "❌ Invalid Email";
  });
</script>

Categorized Metacharacters Used

• ^ : Anchors the pattern to the start of the string

• $ : Anchors to the end of the string

• + : Matches one or more of the preceding token

• . : Matches a literal dot when escaped

• [] : Character class to match specific characters

• \ : Escape character

• () : Grouping (not used above, but helpful in advanced cases)

Use Cases

• Login/Signup Forms: Validate user inputs on the frontend before submission.

• Email Collection Tools: Filter malformed addresses before storing.

• Marketing Platforms: Ensure clean, usable data for campaigns.

• APIs: Validate payload email fields in front-end logic before sending to server.

Pro Tips

• Avoid overly complex regex unless necessary — it can block valid edge-case emails.

• Don’t rely only on regex. Use server-side validation to catch edge cases and protect against injection.

• Regex does not validate domain existence — only the structure. Use DNS lookups if needed.

• For international emails with Unicode, use more advanced regex with Unicode flags or native libraries.

• Always trim spaces before validation — even a space at the end can make a valid email fail.

Combine with These Tools

• JavaScript Regex Tester: Build and debug your email patterns live in JavaScript.

• Phone Number Regex JavaScript Validator: Use with forms collecting both email and contact details.

• UUID Regex JavaScript Validator: Pair email addresses with unique identifiers.

• Base64 Encoder: Encode email data before transmission.

• Token Generator: Combine verified emails with tokens for verification links or sign-up flows.