javascript - Validate email pattern with regex

Question

I googled a lot and the best and shortest answer that is:

^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$

it makes validation until

somoene@hotmail

but if i type

[email protected]

[email protected]

[email protected]

all of this would be not catched by the regex that the email is invalid.

How can i validate this cases also with regex ?

<label for="email">Email <span class="error">*</span></label>
<input type="email" class="form-control" [(ngModel)]="contactUsForm.email" name="email" id="email" required
    #email="ngModel" pattern="^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$" />

Answer 1

When you have chosen the shortest, you were giving up some of the complexities, like the ones you saw.

Let's divide your regex:

---

First part, before @:

[a-zA-Z0-9_.+-]+ means one or more repetitions of letters and numbers, _, ., and also +, -

---

Second part, between @ and .:

[a-zA-Z0-9-]+ means one only letters and numbers and - (no dots allowed)

---

Third part, after .:

[a-zA-Z0-9-.]+ means one or more letters, numbers, - and . - so you can have dozens of dots in this part.

---

If you want to avoid accepting [email protected] as valid, you must restrict the last part, by not accepting dots - [a-zA-Z0-9-.]+ would become [a-zA-Z0-9-]+ - but remember you will have problems with addresses with more than one dot, for example anything ending with .co.uk.

If you want to avoid accepting hotmail.c as valid, you must restrict at least two chars in the last part - [a-zA-Z0-9-.]+ would become [a-zA-Z0-9-.]{2,};

After those fixes you would still have problems. It is better to take longer and more detailed regexes for this work.

Here in stackoverflow there are quite a few. Specific for javascript, in How to validate an email address in JavaScript (5399 upvotes), you have:

function validateEmail(email) {
    const re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

And not specific, but even more complete, in How to validate an email address using a regular expression? (2603 upvotes), you have:

(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[x01-x08x0bx0cx0e-x1fx21x23-x5bx5d-x7f]|\[x01-x09x0bx0cx0e-x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])).){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[x01-x08x0bx0cx0e-x1fx21-x5ax53-x7f]|\[x01-x09x0bx0cx0e-x7f])+)])