Controllare la validità di un indirizzo email in Javascript

Per controllare la validità formale – ovvero la sintassi – di un indirizzo in email in Javascript, la soluzione più rapida ed elegante è quella di confrontare l’indirizzo email da controllare rispetto ad una espressione regolare.

Prima di procedere, però, teniamo sempre a mente che Javascript potrebbe essere disabilitato dall’utente, quindi vi consiglio di controllare anche lato server la validità dell’indirizzo email immesso. Per farlo, possiamo tranquillamente riutilizzare l’espressione regolare che abbiamo usato in questo codice Javascript. Secondo avvertimento, questa funzione gestirà soltanto la forma dell’indirizzo, non la reale esistenza della casella in questione.

Ecco l’espressione regolare da utilizzare, che tiene conto anche dei caratteri unicode:

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

Costruiamoci attorno una funzione da utilizzare e vediamola in azione:

function emailIsValid(email) {
  var regex_email_valida = /^(([^<>()[\]\\.,;:\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 regex_email_valida.test(email);
}

Come possiamo vedere, abbiamo utilizzato il metodo test(), appartenente a qualsiasi oggetto di tipo RegExpObject, creato automaticamente non appena abbiamo inizializzato la variabile regex_email_valida.

La funzione, naturalmente, è di tipo bool , ci restituirà true o false .

Proviamo a fare un esempio completo con l’invio di un form:

<form id="form_test">
    <label>Indirizzo email</label>
    <input type="email" id="email">
    <button type="submit" id="validate">Invio</button>
</form>

var form = document.querySelector('#form_test');

form.addEventListener('submit', function(e) {
    e.preventDefault();
   
    if (emailIsValid("luca.murante@gmail.com")) {
        alert("Email valida");
    } else {
        alert("Email non valida");
    }
}, false);

form.submit();