Come validare un indirizzo email in Javascript
In questo articolo realizziamo uno script per verificare la validità di un indirizzo email inserito in un form.
Per introdurre l'argomento, capiamo da cosa è composto un indirizzo.
Un indirizzo email non è altro che una stringa divisa in due parti dal simbolo @: la parte di sinistra è il nome della casella, la parte destra è il dominio della casella.
Il nome della casella
Può contenere fino a 64 caratteri, ti questa tipologia:
- caratteri maiuscoli (A-Z) e minuscoli (a-z)
- numeri (0-9)
- caratteri speciali ammessi: ! # $ % & ' * + - / = ? ^ _ ` { | } ~
- il carattere punto ".": è ammesso ma non come primo o ultimo carattere, o seguito/preceduto da un altro punto
Il dominio della casella
Può contenere fino a 253 caratteri: sono ammesse lettere, cifre, trattini e punti
Esempi di caselle email valide
- mionome@miosito.it
- mario.tecca@ilsito.org
- mario@il.miosito.it
Esempi di caselle email non valide
- mionome.miosito.it [ la @ non è presente ]
- mionome@.miosito.it [ la tld (Top Level domain) non può iniziare con un punto "." ]
- @miosito.it [ nessun carattere prima della @ ]
- mionome@miosito.i [ ".i" non è un valido tld ]
- .mionome@miosito.it [ il nome della casella non può iniziare con il punto "." ]
- mionome()*@miosito.it [ il nome della casella contiene caratteri non ammessi ]
- mionome..1234@miosito.it [ il nome della casella contiene due punti consecutivi, non ammessi ]
Javascript per validare un indirizzo email
Ecco il codice del javascript che utilizzeremo per il nostro scopo
function validazioneEmail(email)
{
// recupero il valore della email indicata nel form
var email=document.forms['miomodulo'].email.value;
// se non ho inserito nulla nel campo
if(email==''){alert("Devi indicare un indirizzo email"); return false;}
// verifico se è un indirizzo valido
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email))
{
alert("L'indirizzo email che hai inserito e' valido")
}
else {
alert("L'indirizzo email che hai inserito non e' valido");
}
return false;
}La verifica dell'indizzo, come vediamo, è effettuata utilizzando questa Espressione regolare (Regular Expression)
/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/In poche parole andiamo a verificare che l'indirizzo email rispecchi le caratteristiche che abbiamo indicato in fase di presentazione.
Addentriamoci nel dettaglio di questa espressione regolare:
| Carattere | Descrizione |
| / ..... / | Tutte le espressioni regolai iniziano e finiscono con una slash |
| ^ | Verifica l'inizio di una stringa |
| \w+ | Verifica la presenza di uno o più caratteri, incluso il carattere di sottolineatura. E' equivalente a [A-Za-z0-9_] |
| [\.-] | \ Indica che il carattere successivo è un carattere speciale e non deve essere interpretato "alla lettera" (come è). .- corrisponde al carattare . o -. |
| ? | Cerco 0 o 1 corrispondenza del carattere precedente [.-] |
| \w+ | Già descritto poco sopra... |
| * | Cerco 0 o più corrispondenze del carattere precedente |
| ([.-]?\w+)* | Cerco 0 o più occorrenze di [.-]?\w+ |
| @ | E' la chiocciola dell'indirizzo email |
| \w+([.-]?\w+)* | La sottoespressione \w+([.-]?\w+)* viene utilizzata per abbinare il nome utente nell'email. Inizia con almeno uno o più caratteri di parole compreso il carattere di sottolineatura, equivalente a [A-Za-z0-9_]. , seguito da . oppure - e. oppure - deve seguire una parola (A-Za-z0-9_). |
| \.\w{2,4} | Corrisponde al punto ".", seguito da due o tre o quattro caratteri, ad esempio .it, .com, ... |
| + | Il segno + specifica che la sottoespressione precedente deve verificarsi una o più volte, ad esempio .it, .co.uk, ... |
| $ | Verifica la fine di una stringa |
Bene, adesso inseriamo il javascript all'interno di una semplice pagina web e testiamo il tutto:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>check email</title>
<script>
function validazioneEmail(email)
{
// recupero il valore della email indicata nel form
var email=document.forms['miomodulo'].email.value;
// se non ho inserito nulla nel campo
if(email==''){alert("Devi indicare un indirizzo email"); return false;}
// verifico se è un indirizzo valido
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email))
{
alert("L'indirizzo email che hai inserito e' valido")
}
else {
alert("L'indirizzo email che hai inserito non e' valido");
}
return false;
}
</script>
</head>
<body>
<h2>Indica il tuo indirizzo email</h2>
<form name="miomodulo">
<input type='text' name='email'/>
<input type="submit" name="submit" value="Submit" onclick="return validazioneEmail()"/>
</form>
</body>
</html>Modificate lo script a vostro piacimento e buon lavoro!
