Validation E-mail’s field

Question

Implementation difficulty of E-mail validation, of a field that receives several, when it is validated email highlights it and separates it by semicolon.

function IsEmail(email){
    var exclude=/[^@-.w]|^[[email protected]]|[._-]{2}|[@.]{2}|(@)[^@]*1/;
    var check=/@[w-]+./;
    var checkend=/.[a-zA-Z]{2,3}$/;
    if(((email.search(exclude) != -1)||(email.search(check)) == -1)||(email.search(checkend) == -1)){return false;}
    else {return true;}
}

Answer 1

//recebido do input
var emailStr = "[email protected],[email protected],[email protected],invalido@,invalidotambem";

//declarando variavel
var validos ="";

//divide emailStr em um array de strings separados pelo 'separador esvirgula'
var emails = emailStr.split(',')

//use a que mais lhe apatecer
var regex = /^(\s?[^\s,]+@[^\s,]+\.[^\s,]+\s?,)*(\s?[^\s,]+@[^\s,]+\.[^\s,]+)$/;

//o loop  para iteração com o array
for (var i = 0; i <= emails.length; i++) {

     // se amail diferente de nulo e satisfaz a regex, acumula os validos na variável 'validos' concatenando com ; (ponto e virgula)
     if( emails[i] != "" && regex.test(emails[i])){
         validos += (emails[i]) +";" ;  
     }
}

//função substr para retirar ultimo ; (ponto e virgula)
console.log(validos.substr(0,(validos.length - 1)));

To make use with function:

function validarEmails() {

  var validos ="";
  var inValidos ="";
  
  var emailStr = document.getElementById('emails').value;
  
  var emails = emailStr.split(',');
  
  var regex = /^(\s?[^\s,]+@[^\s,]+\.[^\s,]+\s?,)*(\s?[^\s,]+@[^\s,]+\.[^\s,]+)$/;
  
  for (var i = 0; i <= emails.length; i++) {

       if( emails[i] != "" && regex.test(emails[i])){
           validos += (emails[i]) +";" ;  
       }
  }
  
  validos = (validos.substr(0,(validos.length - 1)));

  console.log("validos: " +validos);
}

  <input id='emails' placeholder="emails separados por virgulas">
  <button type='submit' onclick="validarEmails()">Validar!</button>

Answer 2

Use regular expressions is probably the best way. You can see a few tests here (taken from Chromium)

function validarEmail(email) {
    var 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());
}

Here are some examples of regular expressions that accept Unicode:

var re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

But keep in mind that you should not rely only on Javascript validation. Javascript can be easily disabled. This should be validated on the server side as well.

Here’s an example of this in action:

function validarEmail(email) {
  var 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(email);
}

function validar() {
  var $result = $("#result");
  var email = $("#email").val();
  $result.text("");

  if (validarEmail(email)) {
    $result.text(email + " é válido :)");
    $result.css("color", "green");
  } else {
    $result.text(email + " não é válido :(");
    $result.css("color", "red");
  }
  return false;
}

$("#validar").bind("click", validar);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <p>Introduz o seu endereço eletrónico:</p>
  <input id='email'>
  <button type='submit' id='validar'>Validar!</button>
</form>

<h2 id='result'></h2>