Email Check

by Andrew Gerst

CSS

div {
  display: inline-block;
  width: 135px;
}

input {
  width: 120px;
}

.valid {
  background: rgba(50, 205, 50, .3);
}

.invalid {
  background: rgba(255, 0, 0, .3);
}

JavaScript

// var EMAIL_REGEX = /^(([^<>()\[\]\\.,;:\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,}))$/;
// var EMAIL_REGEX = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
// var EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
var EMAIL_REGEX = /.+@.+/;

function emailCheck(value, expectedValue, expectedMismatch, multiple) {
  var i = document.createElement('input');
  var i2 = document.createElement('input');

  i.type = 'email';
  i.value = i2.value = value;
  i.multiple = !!multiple;

  var mismatch = i.validity.typeMismatch;
  var mismatchPass = mismatch == expectedMismatch;
  var sanitizePass = i.value == expectedValue;
  var mismatchResult = '"' + value + '" is a ' + (mismatch ? 'invalid' : 'valid') + ' email address' + (multiple ? ' list. ' : '. ');
  var sanitizeResult = 'It was sanitized to "' + i.value + '"' + (sanitizePass ? '.' : ', but should be sanitized to "' + expectedValue + '"');
  var result = mismatchResult;

  if (value !== expectedValue || !sanitizePass) {
    result += sanitizeResult;
  }

  i2.className = EMAIL_REGEX.test(expectedValue) !== expectedMismatch ? 'valid' : 'invalid';
  i.className = mismatchPass ? 'valid' : 'invalid';

  browser.appendChild(i);
  regex.appendChild(i2);
}

function debug(txt) {
  var h3 = document.createElement('h3');
  var pBrowser = document.createElement('p');
  var pRegex = document.createElement('p');

  h3.innerText = txt;
  pBrowser.innerText = 'Your browser';
  pRegex.innerText = 'Your regex';

  browser = document.createElement('div');
  regex =...