Validating Common Form Input - Part 7

Validating email adresses

Email adresses are a diffcult thing to reliably validate. The syntax for emails are extremely flexible. Even if you would like to check for all possible valid formats I doubt that regular expressions in JavaScript is powerfull enough for the task.

We can still make an effort though. I will concentrate on validating the part before the @ as the domain part was shown in part 6. For this part I am assuming a domain name in the format example.com - a single domain name followed by a top level domain name in between 2 and 6 characters in length.

An email address usually (emphasis on usually) consists of lowercase letters, digits and possibly the underscore. It can be from 1 to 255 characters long

 1 function validate(form) {
 2   // Shortcut to save writing
 3   var email = form.elements.email.value;
 4   // Check basic email
 5   var rgx = /^\s*[a-z\d_]{1,255}@[a-z\d\-]{1,255}\.[a-z]{2,6}\s*$/;
 6   if(!rgx.test(url))
 7     return false;
 8   return true;
 9 }
function validate(form) {
  // Shortcut to save writing
  var email = form.elements.email.value;
  // Check basic email
  var rgx = /^\s*[a-z\d_]{1,255}@[a-z\d\-]{1,255}\.[a-z]{2,6}\s*$/;
  if(!rgx.test(url))
    return false;
  return true;
}

Email addresses can also have a dot. They can not start with a dot nor can they end in a dot. hello.world@jslab.dk is a valid address but .hello.world@jslab.dk or hello.world.@jslab.dk is not

 1 function validate(form) {
 2   // Shortcut to save writing
 3   var email = form.elements.email.value;
 4   // Check basic email
 5   var rgx = /^\s*[a-z\d_]+(\.[a-z\d_]+)*@[a-z\d\-]{1,255}\.[a-z]{2,6}\s*$/;
 6   if(!rgx.test(url))
 7     return false;
 8   return true;
 9 }
function validate(form) {
  // Shortcut to save writing
  var email = form.elements.email.value;
  // Check basic email
  var rgx = /^\s*[a-z\d_]+(\.[a-z\d_]+)*@[a-z\d\-]{1,255}\.[a-z]{2,6}\s*$/;
  if(!rgx.test(url))
    return false;
  return true;
}

Now we can have dots in the address but have difficulty counting the correct number of characters.

To test that the number of characters before the @ is between 1 and 255

 1 function validate(form) {
 2   // Shortcut to save writing
 3   var email = form.elements.email.value;
 4   // Check length
 5   var rgx = /^\s*.{1,255}@/;
 6   if(!rgx.test(url))
 7     return false;
 8   // Check basic email
 9   rgx = /^\s*[a-z\d_]+(\.[a-z\d_]+)*@[a-z\d\-]{1,255}\.[a-z]{2,6}\s*$/;
10   if(!rgx.test(url))
11     return false;
12   return true;
13 }
function validate(form) {
  // Shortcut to save writing
  var email = form.elements.email.value;
  // Check length
  var rgx = /^\s*.{1,255}@/;
  if(!rgx.test(url))
    return false;
  // Check basic email
  rgx = /^\s*[a-z\d_]+(\.[a-z\d_]+)*@[a-z\d\-]{1,255}\.[a-z]{2,6}\s*$/;
  if(!rgx.test(url))
    return false;
  return true;
}

The above check is likely to cover most of the scenarios you will meet.

If you want to verify complex domain names then split the email address at the @ and do individual validations for the address and the domain.

This concludes the validation tutorial. Even though you can now validate your input you should always perform server side validation as well. Never ever trust any input. If the user has disabled JavaScript then no checks are performed.

The final page is a summary of the regular expressions used in the tutorial.

Leave a comment