I'd like to check if the user input is an email address in JavaScript, before sending it to a server or attempting to send an email to it, to prevent the most basic mistyping. How could I achieve this?
93 Answers
Using regular expressions is probably the best way. You can see a bunch of tests here (taken from chromium)
const validateEmail = (email) => {
return String(email)
.toLowerCase()
.match(
/^(([^<>()[\]\\.,;:\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,}))$/
);
};
Here's the example of a regular expression that accepts unicode:
const re =
/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
But keep in mind that one should not rely only upon JavaScript validation. JavaScript can easily be disabled. This should be validated on the server side as well.
Here's an example of the above in action:
const validateEmail = (email) => {
return email.match(
/^(([^<>()[\]\\.,;:\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,}))$/
);
};
const validate = () => {
const $result = $('#result');
const email = $('#email').val();
$result.text('');
if (validateEmail(email)) {
$result.text(email + ' is valid :)');
$result.css('color', 'green');
} else {
$result.text(email + ' is not valid :(');
$result.css('color', 'red');
}
return false;
}
$('#email').on('input', validate);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="email">Enter an email address: </label>
<input id="email" />
<h2 id="result"></h2>Wow, there are lots of complexity here. If all you want to do is just catch the most obvious syntax errors, I would do something like this:
^\S+@\S+$
It usually catches the most obvious errors that the user makes and assures that the form is mostly right, which is what JavaScript validation is all about.
EDIT: We can also check for '.' in the email using
/^\S+@\S+\.\S+$/
There's something you have to understand the second you decide to use a regular expression to validate emails: It's probably not a good idea. Once you have come to terms with that, there are many implementations out there that can get you halfway there, this article sums them up nicely.
In short, however, the only way to be absolutely, positively sure that what the user entered is in fact an email is to actually send an email and see what happens. Other than that it's all just guesses.
JavaScript can match a regular expression:
emailAddress.match( / some_regex /);
Here's an RFC22 regular expression for emails:
^((?>[a-zA-Z\d!#$%&'*+\-/=?^_`{|}~]+\x20*|"((?=[\x01-\x7f])[^"\\]|\\[\x01-\x7f])*
"\x20*)*(?<angle><))?((?!\.)(?>\.?[a-zA-Z\d!#$%&'*+\-/=?^_`{|}~]+)+|"((?=[\x01-\x
7f])[^"\\]|\\[\x01-\x7f])*")@(((?!-)[a-zA-Z\d\-]+(?<!-)\.)+[a-zA-Z]{2,}|\[(((?(?<
!\[)\.)(25[0-5]|2[0-4]\d|[01]?\d?\d)){4}|[a-zA-Z\d\-]*[a-zA-Z\d]:((?=[\x01-\x7f])
[^\\\[\]]|\\[\x01-\x7f])+)\])(?(angle)>)$
This was stolen from http://codesnippets.joyent.com/posts/show/1917
email = $('email');
filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (filter.test(email.value)) {
// Yay! valid
return true;
}
else
{return false;}
It's hard to get an email validator 100% correct. The only real way to get it correct would be to send a test email to the account. That said, there are a few basic checks that can help make sure that you're getting something reasonable.
Some things to improve:
Instead of new RegExp, just try writing the regexp out like this:
if (reg.test(/@/))
Second, check to make sure that a period comes after the @ sign, and make sure that there are characters between the @s and periods.
Regex updated! try this
let val = 'email@domain.com';
if(/^[a-z0-9][a-z0-9-_\.]+@([a-z]|[a-z0-9]?[a-z0-9-]+[a-z0-9])\.[a-z0-9]{2,10}(?:\.[a-z]{2,10})?$/.test(val)) {
console.log('passed');
}
typscript version complete
//
export const emailValid = (val:string):boolean => /^[a-z0-9][a-z0-9-_\.]+@([a-z]|[a-z0-9]?[a-z0-9-]+[a-z0-9])\.[a-z0-9]{2,10}(?:\.[a-z]{2,10})?$/.test(val);
more info https://git.io/vhEfc
Use this code inside your validator function:
var emailID = document.forms["formName"]["form element id"].value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
return false;
}
Else you can use jQuery. Inside rules define:
eMailId: {
required: true,
email: true
}
Wow, there are a lot of answers that contain slightly different regular expressions. I've tried many that I've got different results and a variety of different issues with all of them.
For UI validation, I'm good with the most basic check of looking for an @ sign. It's important to note, that I always do server-side validation with a standard "validate email" that contains a unique link for the user to confirm their email address.
if (email.indexOf('@') > 0)
I have purposely chosen 0 even with zero-based as it also ensures there is a single character before the @.
In my case, I wanted to avoid ~ and # that's why I have used another solution:
function validEmail(email){
const regex = /^((?!\.)[\w\-_.]*[^.])(@\w+)(\.\w+(\.\w+)?[^.\W])$/;
return regex.test(email);
}
function validEmail(email){
const regex = /^((?!\.)[\w\-_.]*[^.])(@\w+)(\.\w+(\.\w+)?[^.\W])$/;
return regex.test(email);
}
const emails = [
'pio_pio@factory.com',
'~pio_pio@factory.com',
'pio_~pio@factory.com',
'pio_#pio@factory.com',
'pio_pio@#factory.com',
'pio_pio@factory.c#om',
'pio_pio@factory.c*om',
'pio^_pio@factory.com'
]
for(const email of emails){
document.write(email+' : '+validEmail(email)+'</br>');
}Most of the answers here are not linter friendly, it's a mess! Some of them are also outdated!
After a lot of time spending, I decided to use an external library named email-validator, install it easily by npm for example and import/require it in your own project:
https://www.npmjs.com/package/email-validator
//NodeJs
const validator = require("email-validator");
validator.validate("test@email.com"); // true
//TypeScript/JavaScript
import * as EmailValidator from 'email-validator';
EmailValidator.validate("test@email.com"); // true
Here's a list of several commonly used regular expressions valid in Android and Java:
User names:
"^[A-Za-z0-9_-]{min number of character,max number of character}$";Telephone numbers:
"(^\\+)?[0-9()-]*";Telephone numbers (optional):
^($|(^\\+)?[0-9()-]*)$";Email addresses:
"[a-zA-Z0-9_\\.\\+-]+@[a-zA-Z0-9-]+\\.[a-zA-Z0-9-\\.]+";Email addresses (optional):
"^($|[a-zA-Z0-9_\\.\\+-]+@[a-zA-Z0-9-]+\\.[a-zA-Z0-9-\\.]+)$";Web URL:
"^($|(http:\\/\\/|https:\\/\\/)?(www.)?([a-zA-Z0-9]+).[a-zA-Z0-9]*.[a-z]{3}.?([a-z]+)?)$";URL for YouTube shortener (youtu.be) URLs:
"https?\\:\\/\\/(www\\.)?youtu(\\.)?be(\\.com)?\\/.*(\\?v=|\\/v\\/)?[a-zA-Z0-9_\\-]+";Postal address:
"[a-zA-Z\\d\\s\\-\\,\\#\\.\\+]+";Non-empty fields:
"[^\\s]*";6-digit PIN:
"^([0-9]{6})?$";IFSC codes:
"^[^\\s]{4}\\d{7}$";SWIFT codes:
"^([0-9]{10})?$";
The regular expression provided by Microsoft within ASP.NET MVC is
/^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$/
Which I post here in case it's flawed - though it's always been perfect for my needs.
I prefer to keep it simple and keep my users happy. I also prefer code which is easy to understand. RegEx is not.
function isValidEmail(value) {
const atLocation = value.lastIndexOf("@");
const dotLocation = value.lastIndexOf(".");
return (
atLocation > 0 &&
dotLocation > atLocation + 1 &&
dotLocation < value.length - 1
);
};
- Get the location of the last "@" and the last "."
- Make sure the "@" is not the first char (there is something before it)
- Make sure the "." is after the "@" and that there is at least one char between them
- Make sure there is at least a single char after the "."
Will this allow invalid email addresses to pass? Sure, but I don't think you need much more for a good user experience that allows you to enable/disable a button, display an error message, etc. You only know for sure that an email address is valid when you attempt to send an email to that address.
This is a JavaScript translation of the validation suggested by the official Rails guide used by thousands of websites:
/^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i
Relatively simple but tests against most common errors.
Tested on a dataset of thousands of emails and it had zero false negatives/positives.
Example usage:
const emailRegex = /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i;
emailRegex.test('email@example.com'); // true
// Multi-word domains
emailRegex.test('email@example.co.uk'); // true
emailRegex.test('email@mail.gmail.com'); // true
// Valid special characters
emailRegex.test('unusual+but+valid+email1900=/!#$%&\'*+-/=?^_`.{|}~@example.com') // true
// Trailing dots
emailRegex.test('email@example.co.uk.'); // false
// No domain
emailRegex.test('email@example'); // false
// Leading space
emailRegex.test(' email@example.com'); // false
// Trailing space
emailRegex.test('email@example.com '); // false
// Incorrect domains
emailRegex.test('email@example,com '); // false
// Other invalid emails
emailRegex.test('invalid.email.com') // false
emailRegex.test('invalid@email@domain.com') // false
emailRegex.test('email@example..com') // false
You can use this regex (from w3resource (*not related to W3C)):
/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(emailValue)
If you use Node you can use this in the back-end as well as the front-end.
I don't know other back-end languages so I cannot evaluate for other use cases.
If you get this error: Using regular expressions is security-sensitive.
Then here is what you are looking for. This solution is free from " Regular expression Denial of Service (ReDoS) "
Regex to validate emails without (ReDoS):
/^[a-z0-9](?!.*?[^\na-z0-9]{2})[^\s@]+@[^\s@]+\.[^\s@]+[a-z0-9]$/
Please let me know if this solution works for you. Thanks.
Here is the recommended Regex pattern for HTML5 on MDN:
Browsers that support the email input type automatically provide validation to ensure that only text that matches the standard format for Internet e-mail addresses is entered into the input box. Browsers that implement the specification should be using an algorithm equivalent to the following regular expression:
/^[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])?)*$/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#Validation
This question is more dificult to answer than seems at first sight.
There were loads of people around the world looking for "the regex to rule them all" but the truth is that there are tones of email providers.
What's the problem? Well, "a_z%@gmail.com cannot exists but it may exists an address like that through another provider "a__z@provider.com.
Why? According to the RFC: https://en.wikipedia.org/wiki/Email_address#RFC_specification.
I'll take an excerpt to facilitate the lecture:
The local-part of the email address may use any of these ASCII characters:
- uppercase and lowercase Latin letters A to Z and a to z;
- digits 0 to 9;
- special characters !#$%&'*+-/=?^_`{|}~;
- dot ., provided that it is not the first or last character unless quoted, and provided also that it does not appear consecutively unless quoted (e.g. John..Doe@example.com is not allowed but "John..Doe"@example.com is allowed);[6]
Note that some mail servers wildcard local parts, typically the characters following a plus and less often the characters following a minus, so fred+bah@domain and fred+foo@domain might end up in the same inbox as fred+@domain or even as fred@domain. This can be useful for tagging emails for sorting, see below, and for spam control. Braces { and } are also used in that fashion, although less often.
- space and "(),:;<>@[\] characters are allowed with restrictions (they are only allowed inside a quoted string, as described in the paragraph below, and in addition, a backslash or double-quote must be preceded by a backslash);
- comments are allowed with parentheses at either end of the local-part; e.g. john.smith(comment)@example.com and (comment)john.smith@example.com are both equivalent to john.smith@example.com.
So, i can own an email address like that:
A__z/J0hn.sm{it!}h_comment@example.com.co
If you try this address i bet it will fail in all or the major part of regex posted all across the net. But remember this address follows the RFC rules so it's fair valid.
Imagine my frustration at not being able to register anywhere checked with those regex!!
The only one who really can validate an email address is the provider of the email address.
How to deal with, so?
It doesn't matter if a user adds a non-valid e-mail in almost all cases. You can rely on HTML 5 input type="email" that is running near to RFC, little chance to fail. HTML5 input type="email" info: https://www.w3.org/TR/2012/WD-html-markup-20121011/input.email.html
For example, this is an RFC valid email:
"very.(),:;<>[]\".VERY.\"very@\\ \"very\".unusual"@strange.example.com
But the html5 validation will tell you that the text before @ must not contain " or () chars for example, which is actually incorrect.
Anyway, you should do this by accepting the email address and sending an email message to that email address, with a code/link the user must visit to confirm validity.
A good practice while doing this is the "enter your e-mail again" input to avoid user typing errors. If this is not enough for you, add a pre-submit modal-window with a title "is this your current e-mail?", then the mail entered by the user inside an h2 tag, you know, to show clearly which e-mail they entered, then a "yes, submit" button.
General email regex (RFC 5322 Official Standard): https://emailregex.com/
JavaScript:
/^(([^<>()\[\]\\.,;:\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,}))$/
I add my Regex - i solved for me more little issues like characters from other languages or capital letters
^[a-zA-Z0-9][a-zA-Z0-9-_\.]+@([a-zA-Z]|[a-zA-Z0-9]?[a-zA-Z0-9-]+[a-zA-Z0-9])\.[a-zA-Z0-9]{2,10}(?:\.[a-zA-Z]{2,10})?$
Use the browser/runtime to handle parsing the input by prepending a protocol and pass it to the URL API, trapping any errors and check the resulting username and hostname properties of the result. It will handle basically all transformations and possibilities (punycode of character sets, etc). This only establishes that the input is parsable, not that is valid--that is only possible through checking if the destination machine receives messages for that alias. This provides a close (imo reasonable) guess though, and can be expanded to be more specific and realistic if you're comfortable both maintaining it and also risking invalid rejections. (Note it doesn't attempt to address IPv4 or IPv6 addresses, simply the broad range of customer-facing scenarios using a domain.)
function validEmail(email=''){
var $0, url, isValid = false, emailPatternInput = /^[^@]{1,64}@[^@]{4,253}$/, emailPatternUrl = /^[^@]{1,64}@[a-z][a-z0-9\.-]{3,252}$/i;
email = email.trim();
try{
url = new URL('http://'+email);
$0 = `${url.username}@${url.hostname}`;
isValid = emailPatternInput.test( email );
if(!isValid) throw 'invalid email pattern on input:' + email;
isValid = emailPatternUrl.test( $0 );
if(!isValid) throw 'invalid email pattern on url:' + $0;
console.log(`email looks legit "${email}" checking url-parts: "${$0 === email ? '-SAME-':$0}"`);
}catch(err){
console.error(`probably not an email address: "${email}"`, err);
};
return isValid;
}
['user+this@はじめよう.みんな', 'stuff@things', 'user+that@host.com', 'Jean+François@anydomain.museum','هيا@יאללה', '试@例子.测试.مثال.آزمایشی', 'not@@really', 'no'].forEach(email=>console.log(validEmail(email), email));
This is the both the simplest and most generally permissive example I can come up with. Please edit it in cases where it can be made to be more accurate while maintain its simplicity and reasonable generally permissive validity.
Also see MDN URL docs URL, window.URL and Nodejs for URL APIs.
You may try RegExp
function isValidEmail( value ) {
return /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,5}$/.test( value );
}
console.log( isValidEmail("mymail@mydomain.com") )Found the perfect regular expression. It excludes double @, two "." in a row, languages other than English and extra characters at the beginning of the line (".", "-", "!", etc.)
const regexp = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (!this.value.match(regexp)) {
// on error, we get into the condition
this.classList.add('error');
}
// this - email input
Here is a solution that works and includes validation/notification fuctionality in a form:
You can run it at this link
JAVASCRIPT
(function() {
'use strict';
window.addEventListener('load', function() {
var form = document.getElementById('needs-validation');
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
}
form.classList.add('was-validated');
event.preventDefault();
}, false);
}, false);
})();
HTML
<p class='title'>
<b>Email validation</b>
<hr size="30px;">
</p>
<br>
<form id="needs-validation" novalidate>
<p class='form_text'>Try it out!</p>
<div class="form-row">
<div class="col-12">
<input type="email" class="form-control" placeholder="Email Address" required>
<div class="invalid-feedback">
Please enter a valid email address.
</div>
</div>
<div class="row">
<div class="col-12">
<button type="submit"
class="btn btn-default btn-block">Sign up now
</button>
</div>
</div>
</form>
I wrote a JavaScript email validator which is fully compatile with PHP's filter_var($value, FILTER_VALIDATE_EMAIL) implementation.
https://github.com/mpyw/FILTER_VALIDATE_EMAIL.js
import validateEmail from 'filter-validate-email'
const value = '...'
const result = validateEmail(value)
is equivalent to:
<?php
$value = '...';
$result = (bool)filter_var($value, FILTER_VALIDATE_EMAIL, FILTER_FLAG_EMAIL_UNICODE);
You cold use https://github.com/chriso/validator.js and simply do:
var validator = require('validator');
validator.isEmail('foo@bar.com'); //=> true
Note that this can work on the client.
Here's how I do it. I'm using match() to check for the standard email pattern and I'm adding a class to the input text to notify the user accordingly. Hope that helps!
$(document).ready(function(){
$('#submit').on('click', function(){
var email = $('#email').val();
var pat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (email.match(pat)){
$('#email')
.addClass('input-valid');
return false;
} else {
$('#email')
.addClass('input-error')
.val('');
return false;
}
});
});.input-error {
border: 1px solid red;
color: red;
}
.input-valid {
border: 1px solid green;
color: green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" id="email" placeholder="name@service.xx" class="">
<input type="submit" id="submit" value="Send"/>
</form>If you want something a human can read and maintain, I would recommend Masala Parser (I'm one of the creators of it).
import {C,Streams} from '@masala/parser'
const illegalCharset = ' @\u00A0\n\t';
const extendedIllegalCharset = illegalCharset + '.';
// Assume 'nicolas@internal.masala.co.uk'
export function simpleEmail() {
return C.charNotIn(illegalCharset).rep() // 'nicolas'
.then(C.char('@'))
.then(subDns()) //'internal.masala.co.'
.then(C.charNotIn(extendedIllegalCharset).rep()) //'uk'
.eos(); // Must be end of the char stream
}
// x@internal.masala.co.uk => extract 'internal.masala.co.'
function subDns() {
return C.charNotIn(extendedIllegalCharset).rep().then(C.char('.')).rep()
}
function validateEmail(email:string) {
console.log(email + ': ' + (simpleEmail().parse(Streams.ofString(email)).isAccepted()));
}
validateEmail('nicolas@internal.masala.co.uk'); // True
validateEmail('nz@co.'); // False, trailing "."
If you want to accept the ultimate ugly email version, you can add in quotes in the first part:
function inQuote() {
return C.char('"')
.then(C.notChar('"').rep())
.then(C.char('"'))
}
function allEmail() {
return inQuote().or(C.charNotIn(illegalCharset))
.rep() // repeat (inQuote or anyCharacter)
.then(C.char('@'))
.then(subDns())
.then(C.charNotIn(extendedIllegalCharset).rep())
.eos() // Must be end of the character stream
// Create a structure
.map(function (characters) { return ({ email: characters.join('') }); });
}
'"nicolas""love-quotes"@masala.co.uk' is officially valid, but should it be in your system?
At least with Masala, you give yourself a chance to understand it. And so for the next year, colleague.
These will work with the top used emails(they match exactly the rules of each one).
Gmail
/^[a-z]((?!\.\.)([a-z\.])){4,28}[a-z0-9]@gmail.com$/i
Yahoo
/^[a-z]((?!\.\.)([\w\.])){3,30}[\w]@yahoo.com$/i
Outlook/Hotmail
/[a-z]((?!\.\.)([\w\.])){0,62}[\w]@(outlook.com|hotmail.com)$/i
// Html form call function name at submit button
<form name="form1" action="#">
<input type='text' name='text1'/>
<input type="submit" name="submit" value="Submit"
onclick="ValidateEmail(document.form1.text1)"/>
</from>
// Write the function name ValidateEmail below
<script>
function ValidateEmail(inputText)
{
var mailformat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
if(inputText.value.match(mailformat))
{
alert("Valid email address!");
document.form1.text1.focus();
return true;
}
else
{
alert("You have entered an invalid email address!");
document.form1.text1.focus();
return false;
}
}
</script>
Yet another perfect regexp for email validation
/^([^\s\@])+\@(([^\s\@\.])+\.)+([^\s\.]{2,})+$/
You can test it here https://regex101.com/r/FV3pUI/2
// Try this regular Expression by ES6 function
const emailValidate = (email) => {
const regexp= /^[\w.%+-]+@[\w.-]+\.[\w]{2,6}$/;
return regexp.test(email);
}
Use the URL interface in JavaScript to parse the address in the minimum practical expected format user@host then check that it looks reasonable. Next send a message to it and see if that works (for example require the recipient validate a one-time token via the address). Note that this handles punycode, internationalization, as shown in the samples below.
https://developer.mozilla.org/en-US/docs/Web/API/URL
an example with simple tests:
function validEmail(input=''){
const emailPatternInput = /^[^@]{1,64}@[^@]{4,253}$/, emailPatternUrl = /^[^@]{1,64}@[a-z][a-z0-9\.-]{3,252}$/i;
let email, url, valid = false, error, same = false;
try{
email = input.trim();
// handles punycode, etc using browser's own maintained implementation
url = new URL('http://'+email);
let urlderived = `${url.username}@${url.hostname}`;
same = urlderived === email;
valid = emailPatternInput.test( email );
if(!valid) throw new Error('invalid email pattern on input:' + email);
valid = emailPatternUrl.test( urlderived );
if(!valid) throw new Error('invalid email pattern on url:' + urlderived);
}catch(err){
error = err;
};
return {email, url, same, valid, error};
}
[
'user+this@はじめよう.みんな'
, 'stuff@things.eu'
, 'stuff@things'
, 'user+that@host.com'
, 'Jean+François@anydomain.museum','هيا@יאללה'
, '试@例子.测试.مثال.آزمایشی'
, 'not@@really'
, 'no'
].forEach(email=>console.log(validEmail(email), email));
The answer to this question (if you stood back and really thought about it) is that you can't really prevent a user from mistyping their e-mail. Everybody is providing answers that match all the possible letters but nobody has really taken into account the full myriad of characters that can be used.
I refer you to this post and the answer explaining the amount of characters that can be accepted:- Remove invalid characters from e-mail
You can't predict if the letters are the exact way the user intended them to be - which is the most common mistake.. missing a letter out or typing the wrong letter.
All we are doing here is stopping them from typing really odd characters that e-mail addresses wouldn't accept and the likelyhood of them accidently inserting a question mark is just as likely as them accidently getting the letters 'a' and 's' the wrong way around.
Ultimately, no matter what you do in Javascript you will always need your backend script to check if the e-mail was sent successfully too and it will probably have a validation process in place too.
So if you wanted to ensure it was some sort of e-mail address and not their username you only really need to check if there's an @ symbol in there and at least 1 dot and leave all the rest to your backend code.
var email = 'hello@example.com'
if(email.split('@').length == 2 && email.indexOf('.') > 0){
// The split ensures there's only 1 @
// The indexOf ensures there's at least 1 dot.
}
It would be better to avoid stopping the user entering a valid e-mail than to apply so many restrictions that it becomes complicated.
This is just my opinion!
There is my version of an email validator. This code is done with object-oriented programming and realized as a class with static methods. You will find two versions of the validators: strict(EmailValidator.validate) and kind(EmailValidator.validateKind).
The first throws an error if an email is invalid and returns email otherwise. The second returns Boolean value that says if an email is valid. I prefer the strict version in most of the cases.
export class EmailValidator {
/**
* @param {string} email
* @return {string}
* @throws {Error}
*/
static validate(email) {
email = this.prepareEmail(email);
const isValid = this.validateKind(email);
if (isValid)
return email;
throw new Error(`Got invalid email: ${email}.`);
}
/**
* @param {string} email
* @return {boolean}
*/
static validateKind(email) {
email = this.prepareEmail(email);
const regex = this.getRegex();
return regex.test(email);
}
/**
* @return {RegExp}
* @private
*/
static getRegex() {
return /^(([^<>()\[\]\\.,;:\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,}))$/;
}
/**
* @param {string} email
* @return {string}
* @private
*/
static prepareEmail(email) {
return String(email).toLowerCase();
}
}
To validate an email you can follow these ways:
// First way.
try {
EmailValidator.validate('balovbohdan@gmail.com');
} catch (e) {
console.error(e.message);
}
// Second way.
const email = 'balovbohdan@gmail.com';
const isValid = EmailValidator.validateKind(email);
if (isValid)
console.log(`Email is valid: ${email}.`);
else
console.log(`Email is invalid: ${email}.`);
I am using this function
/**
* @param {*} email
*/
export const validateEmail = email => {
return new RegExp(/[\w-]+@([\w-]+\.)+[\w-]+/gm).test(email);
};
This works well for a simple email regex:
anythingExceptAtOrSpace@anythingExceptAtOrSpace.anythingExceptAtOrSpace
/^[^@ ]+@[^@ ]+\.[^@ ]+$/
To test:
const emailRegex = /^[^@ ]+@[^@ ]+\.[^@ ]+$/
const result1 = emailRegex.test('hello@there.com')
console.log(result1) // true
const result2 = emailRegex.test('hel@lo@there.com')
console.log(result2) // falseA shorter answer to your question is: Validating" an e-mail address with a reg-ex is something that any internet based service provider should desist from. The possibilities of kinds of domain names and e-mail addresses have increased so much in terms of variety, any attempt at validation, which is not well thought may end up denying some valid users into your system.
However, there is one good library available in Javascript i.e. "validator.js". It is a popular javascript package for various validations and can be used to validate & normalize email before sending email. It has good compliance when it comes to being inclusive towards IDNs and Internationalized Email addresses.
The longer answer to this can be found below:
There are three RFCs that lay down the foundation for the "Internet Message Format"
- RFC 822
- RFC 2822 (Supercedes RFC 822)
- RFC 5322 (Supercedes RFC 2822)
The RFC 5322, however, defines the e-mail IDs and their naming structure in the most technical manner. That is more suitable laying down the foundation an Internet Standard that liberal enough to allow all the use-cases yet, conservative enough to bind it in some formalism.
However, the e-mail validation requirement from the software developer community, has the following needs -
- to stave off unwanted spammers
- to ensure the user does not make inadvertent mistake
- to ensure that the e-mail ID belongs to the actual person inputting it
They are not exactly interested in implementing a technically all-encompassing definition that allows all the forms (IP addresses, including port IDs and all) of e-mail id. The solution suitable for their use-case is expected to solely ensure that all the legitimate e-mail holders should be able to get through. The definition of ""legitimate"" differes vastly from techical stand-point (RFC 5322 way) to usability stand-point(this solution). The usability aspect of the validation aims to ensure that all the e-mail IDs validated by the validation mechanism belong to actual people, using them for their communication purposes. This, thus introduces another angle to the validation process, ensuring an actually ""in-use"" e-mail ID, a requirement for which RFC-5322 definition is clearly not sufficient.
Thus, on practical grounds, the actual requirements boil down to this -
- To ensure some very basic validation checks
- To ensure that the inputted e-mail is in use
Second requirement typically involves, sending a standard response seeking e-mail to the inputted e-mail ID and authenticating the user based on the action delineated in the response mechanism. This is the most widely used mechanism to ensure the second requirement of validating an ""in use"" e-mail ID. This does involve round-tripping from the back-end server implementation and is not a straight-forward single-screen implementaion, however, one cannot do away with this.
The first requirement, stems from the need that the developers do not want totally ""non e-mail like"" strings to pass as an e-mail. This typically involves blanks, strings without ""@"" sign or without a domain name. Given the punycode representations of the domain names, if one needs to enable domain validation, they need to engage in full-fledged implementation that ensures a valid domain name. Thus, given the basic nature of requirement in this regard, validating for ""@."" is the only apt way of satisfying the requirement.
A typical regex that can satisfy this requirement is: ^[^@\s]+@[^@\s.]+.[^@\s.]+$ The above regex, follows the standard Perl regular-expression standard, widely followed by majority of the programming languages. The validation statement is: <anything except whitespaces and ""@"" sign>@<anything except whitespaces and ""@"" sign>.<anything except whitespaces, @ sign and dot>
For those who want to go one step deeper into the more relevant implementations, they can follow the following validation methodology. @
For - Follow the guidelines by the ""Universal Acceptance Steering Group"" - UASG-026 - https://uasg.tech/download/uasg-028-considerations-for-naming-internationalized-email-mailboxes-en/ For , you can follow any domain validation methodology using standard libraries, depending on your programming language. For the recent studies on the subject, follow the document UASG-018A - https://uasg.tech/download/uasg-018a-ua-compliance-of-some-programming-language-libraries-and-frameworks-en/. In addition, those who are interested to know the overall process, challenges and issues one may come across while implementing the Internationalized Email Solution, they can also go through the following RFCs: RFC 6530 (Overview and Framework for Internationalized Email), RFC 6531 (SMTP Extension for Internationalized Email), RFC 6532 (Internationalized Email Headers), RFC 6533 (Internationalized Delivery Status and Disposition Notifications), RFC 6855 (IMAP Support for UTF-8), RFC 6856 (Post Office Protocol Version 3 (POP3) Support for UTF-8), RFC 6857 (Post-Delivery Message Downgrading for Internationalized Email Messages), RFC 6858 (Simplified POP and IMAP Downgrading for Internationalized Email)."
Flutter Dart email validation
/// Wrong symbols sequence tested with traceability matrix.
/// ------------------
/// | | . | _ | - |
/// | . | v | v | v |
/// | _ | v | v | v |
/// | - | v | v | v |
/// -----------------
const String _wrongEmailSymbolsSequencePattern =
r'([.]{2,})|([-]{2,})|([@]{2,})|((\._)+)|((\.-)+)|((_\.)+)|((_-)+)|((-_)+)|((-\.)+)';
const String _emailPattern =
r'^[a-zA-Z0-9][\w\-.]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\-.]*[a-zA-Z0-9]\.[a-zA-Z]{2,}$';
const String _emailRangePattern = r'^[\w\-@.]{8,254}$';
/// Return `true` if email valid.
///
/// `Email range`
/// - min 8
/// - max 256
/// - minimum valid pattern: xx@xx.xx
///
/// `Name`
/// - should be latin letters, numbers or symbols ".", "_", "-"
/// - must start and end with a letter or number
/// - cannot use two symbols together
bool validateEmail(String email) {
if (!RegExp(_emailRangePattern).hasMatch(email)) return false;
if (RegExp(_wrongEmailSymbolsSequencePattern).hasMatch(email)) return false;
if (RegExp(_emailPattern).hasMatch(email)) return true;
return false;
}
void main() {
validateEmail('x.x@xx.xx'); // true
validateEmail('x.-x@xx.xx'); // false
}
Unit tests for validateEmail here:
https://gist.github.com/yauheniprakapenka/f08c4e0d8366dbdfae9c78fb4ed836f9
Related