Ad esempio, convalida e-mail con JavaScript (Regex)

Molte volte ci viene presentata la necessità di convalidare l'inserimento di un indirizzo e-mail in un determinato campo del nostro modulo. email valida. In questo articolo impareremo come convalidare le email utilizzando espressioni regolari (note anche come regex) in JavaScript.

Cos'è un'espressione regolare (regex)?

Un'espressione regolare è una sequenza di caratteri che definisce un modello di ricerca. In questo caso, vogliamo trovare un pattern che rappresenti un indirizzo email valido.

Le espressioni regolari sono uno strumento potente e flessibile per lavorare con stringhe di testo e convalidare i dati di input.

Convalida e-mail con regex

Per convalidare la validità di un'e-mail, dobbiamo verificare che il formato sia corretto, ovvero che includa una @ e un dominio. Per questo usiamo la seguente espressione:

var espressione regolare = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)*.[a-zA-Z]{2,}$/;

Esempio di modulo completo

Nell'esempio seguente viene mostrato come convalidare un indirizzo e-mail utilizzando JavaScript e un'espressione regolare. I passi che seguiamo sono:

1. Definiamo una funzione chiamata validateMail che prende come argomento l'email da validare.
2. Creiamo una variabile espressione regolare A contenente l'espressione regolare per convalidare l'e-mail.
3. Usiamo il metodo test() dell'espressione regolare per verificare se l'e-mail immessa corrisponde al modello.
4. Se l'e-mail è valida, viene visualizzato un messaggio di avviso che indica che è valido; in caso contrario, viene visualizzato un messaggio di avviso che indica che non è valido.
5. Nell'HTML, creiamo un campo di input di tipo "email" e un pulsante che, se cliccato, richiama la funzione validateMail con il valore immesso nel campo di immissione.

function validateEmail (mail) {
// Espressione regolare per convalidare l'email
var regex = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)*.[a-zA-Z]{2,}$/;
// Controlla se la posta corrisponde al modello definito dall'espressione regolare
if (regex.test (mail)) {
alert("Email valida");
} else {
alert ("Email non valida");
}
}

Convalida e-mail con JavaScript e regex

Convalidare

Vantaggi e svantaggi della convalida con JavaScript

La convalida dei dati di input, come gli indirizzi e-mail, utilizzando JavaScript sul lato client presenta vantaggi e svantaggi:

Vantaggi	Svantaggi
Feedback immediato per l'utente	Non è sicuro
Meno carico sul server	Compatibilità tra browser
Migliora l'esperienza dell'utente	Duplicazione dello sforzo (lato client/server)
Riduzione dei tempi di risposta	Non sostituisce la convalida sul lato server

La convalida dei dati tramite JavaScript non sostituisce la convalida lato server. Tuttavia, aiuta a ridurre il carico. Per validare i dati lato server ti consiglio di leggere:

• Convalida della posta con PHP