Clientside regex email validation - additionally check for min length of name & tld

Question

In addition to serverside validation I want to have some clientside validation (javascript/jquery) for an email input field accepting only emails where its address is at least 3 characters long and its tld at least 2 chararacters.

As of right now I'm checking the whole Email like this:

html:

<input type="email" name="email" placeholder="E-Mail" class="form-control" id="chatemail">

javascript:

var re_email = new RegExp(/^[a-zA-Z0-9\_\.\-]+@[a-zA-Z0-9\-]+(?:\.[a-zA-Z]+)$/);
var is_email = re_email.test($('#chatemail').val());

// and its length like this:
$('#chatemail').val().length > 5

But in addition how can I check that the email ending e.g. @gmx.de

... that the 'gmx' is at least 3 digits long and the the 'de' is at least 2 digits long? So what I don't want is that somebody can type in @g.d or @gm.c ... and stuff like that ...

I tried to split the regex ... but my attempts doesn't work ...

var re_email_01 = /^[a-zA-Z0-9\_\.\-]$/;
var re_email_02 = /^@[a-zA-Z0-9\-]$/;
var re_email_03 = /^(?:\.[a-zA-Z]+)$/;

var re_email = new RegExp(re_email_01+'+'+re_email_02+'+'+re_email_03);

I also tried this ...

var re_email = new RegExp(/^[a-zA-Z0-9\_\.\-]+@[a-zA-Z0-9\-]{3,}+(?:\.[a-zA-Z]{2,}+)$/);

Answer 1

Your e-mail regular expression is very restrictive. Answering the question, you may re-write your pattern to accommodate for your requirement like this:

var re_email = /^[-.\w]+@(?![^.]{0,2}\.[a-zA-Z]{2,}$)([-a-zA-Z0-9]+\.)+[a-zA-Z]{2,}$/;

See the regex demo

You should not add + after the limiting quantifiers ({min,max} constructs), JS regex does not support possessive quantifiers like Java or PCRE, it is an invalid construct. Also, no need to use new RegExp with a static pattern, just use a regex literal.

An important part here is the (?![^.]{0,2}\.[a-zA-Z]{2,}$) negative lookahead: it fails the match if the domain part is only 0 to 2 chars other than a dot and then comes a dot and 2 or more letters.

Note also that [a-zA-Z0-9_] matches the same as \w in JS regex and when you put the - at the start of a character class, you do not need to escape it to be parsed as a literal hyphen.

Pattern details:

• ^ - start of string
• [-.\w]+ - 1 or more -, . or alphanumeric/_ symbols
• @ - a @ symbol
• (?![^.]{0,2}\.[a-zA-Z]{2,}$) - there cannot be 0 to 2 chars other than . followed with . and then 2 or more letters up to the end of the string immediately to the right of @
• ([-a-zA-Z0-9]+\.)+ - 1 or more sequences of - or alphanumeric chars followed with a dot
• [a-zA-Z]{2,} - 2 or more ASCII letters
• $ - end of string.

Answer 2

i use the html5 build in function for e-mail validation:

function emailValid(emailAddy){
  var email = document.createElement('input');
  email.type = 'email';
  email.value = emailAddy;
  return email.validity.valid; 
};

alert (emailValid('ttt@gmx.de'));
alert (emailValid('tt t@gm x.de'));

js fiddle

Answer 3

You can use the below regex for your requirements:

/^[.-\w]+@[\w\-]{3,}((.)\w{2,})+$/

This allows letters, digits and (-, _, .) in the first part of the email address and ensures that atleast 3 characters are there after '@' and then atleast 2 after the dot(.). This regex also takes care of ensuring subsequent dot(.)'s also have 2 characters after them like you've mentioned in the rules. Samples:

// Matching
abc@gmx.dcom
newemail@gmail.com
8-d_873@abc.co
abc.deg@new.co
abc@9mail.co
d@mail.com
abc.deg@new.co.uk

// Not matching
abc@gmc.d
abc@gm.de
d@ma.com
d@
9@99.213
first.name@gmx...de