DEV Community

Why experienced developers never use regex for email validation?

Nik L. on December 05, 2024

The Problem No One Talks About Let's be real: email validation sounds simple, but it's a technical trap that catches even experienced de...

Read full post

Samuel Rouse • Dec 6 • Edited

A really simple validator is to use the built-in field validation of the email input type.

export const checkEmail = (emailString, multiple=false) => {
 const el = document.createElement('input');
  el.type = 'email';
  el.multiple = multiple;
  el.value = emailString;
  return el.checkValidity();
};

If you plan to call it frequently you could persist the DOM element.

const emailElement = document.createElement('input');
emailElement.type = 'email';

export const checkEmail = (emailString, multiple=false) => {
  emailElement.multiple = multiple;
  emailElement.value = emailString;
  return emailElement.checkValidity();
};

Tope Akintola • Dec 11

i really like this approach

Ben Sinclair • Dec 6

Bug spotted: the "Basic Validation That Actually Works" example here will fail on admin@mailserver1 which you previously recognised as valid.

Nik L. • Dec 6

thanks, that's true for single label domain, have amended.

Alan • Dec 7 • Edited

We use client side and server side validation without duplicating the code with trpc, zod and npm workspace as Zod is in a shared package. So it can be used by the client and the server

github.com/alan345/TER

Vadim • Dec 7

In a browser, use input type="email"

Eugene • Dec 7

It’s only a client-side validation that can be easily bypassed. Server-side validation always required.

Nik L. • Dec 7

that's the ideal case: a basic client-side validation coupled with a validation from the server side.

Vadim • Dec 7

Of course, nobody argues about that )

steve • Dec 11 • Edited

Devs who don't understand regex or email validation may have this problem. Eitherway its handled on the backend anyway. Front end validation is just to save an api request and improve ui experience. Untested and yes problems arise. My tip: don't use 1 regex. Break it up to reduce complexity. Or keep it simple and forgiving. /[^@]+\@[^\@.]+(.[^\@]+)*/. Or better yet just use zod or yup.

Eugene • Dec 7 • Edited

Indeed, libraries are also written by ppl and might use the same techniques listed above. Typically, checking domain name to be valid is simple and enough to send confirmation letter (in most cases), everything else is on a user.

Nik L. • Dec 7

yes, definitely for the client-side validation.

felix • Dec 9

HAHAHAHA i tried to make an account for this site

also, subgenius reference ;) i thought everyone had forgotten already

felix • Dec 9

srsly though the email is 76 characters and once i tried to create an account and the form max length was 75 (removing the html limit worked lol)