• seguici su feed rss
  • seguici su twitter
  • seguici su linkedin
  • seguici su facebook
  • cerca

SEI GIA' REGISTRATO? EFFETTUA ADESSO IL LOGIN.



ricordami per 365 giorni

HAI DIMENTICATO LA PASSWORD? CLICCA QUI

NON SEI ANCORA REGISTRATO ? CLICCA QUI E REGISTRATI !

Come validare un indirizzo email in Javascript

di :: 21 febbraio 2020 15:18
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!

 
pay per script

Hai bisogno di uno script PHP personalizzato, di una particolare configurazione su Linux, di una gestione dei tuoi server Linux, o di una consulenza per il tuo progetto?

 
 
 
x

ATTENZIONE