JavaScript Regex Validation: Email, Phone, Slug, Password

Regex is often used to check user input. Here are practical patterns, and the honest limits of each.

A pattern, then a test function

script.js

const patterns = {
  slug: /^[a-z0-9]+(?:-[a-z0-9]+)*$/,
  hexColor: /^#(?:[0-9a-f]{3}){1,2}$/i,
  postcodeUS: /^\d{5}(?:-\d{4})?$/,
  username: /^[a-zA-Z][a-zA-Z0-9_]{2,15}$/
};

console.log(patterns.slug.test("my-first-post"));  // → true
console.log(patterns.slug.test("My Post"));        // → false
console.log(patterns.hexColor.test("#d94a00"));    // → true
console.log(patterns.hexColor.test("#12"));        // → false
console.log(patterns.postcodeUS.test("12345-6789")); // → true
console.log(patterns.username.test("maya_28"));    // → true
console.log(patterns.username.test("2fast"));      // → false

Each pattern is anchored with ^ and $, so the whole text has to match.

Email: keep it simple

A perfect email regex does not exist, because the real rules are huge. A sensible approach is a loose check, then confirm by sending a message.

script.js

const looksLikeEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

console.log(looksLikeEmail.test("maya@example.com")); // → true
console.log(looksLikeEmail.test("maya@example"));     // → false
console.log(looksLikeEmail.test("maya @example.com")); // → false

For forms, <input type="email"> gives you browser validation for free, see Client-Side Validation.

Phone numbers

Phone formats vary around the world. Allow digits, spaces, dashes and a leading +, and count the digits.

script.js

function looksLikePhone(text) {
  if (!/^\+?[\d\s()-]+$/.test(text)) return false;
  const digits = text.replace(/\D/g, "");
  return digits.length >= 7 && digits.length <= 15;
}

console.log(looksLikePhone("+1 (555) 123-4567")); // → true
console.log(looksLikePhone("12"));                 // → false
console.log(looksLikePhone("call me"));            // → false

Password rules

script.js

function passwordProblems(pw) {
  const problems = [];
  if (pw.length < 8) problems.push("at least 8 characters");
  if (!/[a-z]/.test(pw)) problems.push("a lowercase letter");
  if (!/[A-Z]/.test(pw)) problems.push("an uppercase letter");
  if (!/\d/.test(pw)) problems.push("a digit");
  return problems;
}

console.log(passwordProblems("hello"));        // → ["at least 8 characters", "an uppercase letter", "a digit"]
console.log(passwordProblems("Hello1234"));    // → []

Checking each rule separately lets you tell the user exactly what is missing.

Where regex is not enough

Client-side checks are for convenience. Anyone can bypass them, so a server must validate again.
Do not use regex for HTML, nested structures or full language parsing.
Watch for slow patterns. Nested quantifiers like (a+)+ can take exponential time on certain inputs (“catastrophic backtracking”). Keep patterns simple, especially when matching text from users on a server.

Exercise: a date check

Write a regex that accepts dates like 15/03/2026 (two digits, slash, two digits, slash, four digits) and nothing else.

Show a possible solution

script.js

1
2
3

const datePattern = /^\d{2}\/\d{2}\/\d{4}$/;
console.log(datePattern.test("15/03/2026")); // → true
console.log(datePattern.test("1/3/2026"));   // → false

This only checks the shape. To check that the date really exists, convert it with Date and compare the parts.