Come convalidare un indirizzo email in JavaScript: quattro metodi affidabili

Intorno a 30% Una percentuale di indirizzi email in una lista diventa non valida entro un anno e, se più del 10% della lista non è valido, meno del 44% delle email viene recapitato. Molti di questi indirizzi non validi vengono inseriti nei database tramite moduli con una convalida debole.

La validazione degli indirizzi email in JavaScript funziona a livelli. Verificare che un indirizzo sia formattato correttamente è relativamente semplice. Confermare che il dominio possa ricevere email è più complesso, ma comunque possibile. La parte difficile è verificare che la casella di posta esista effettivamente e possa ricevere messaggi, e JavaScript, utilizzabile solo nel browser, non è in grado di farlo da solo.

La validazione avviene solitamente su tre livelli: sintassi, dominio e casella di posta. JavaScript gestisce bene i controlli di sintassi, mentre librerie e API possono aiutare a verificare i domini. La verifica della casella di posta, tuttavia, richiede una richiesta API lato server perché il browser non può confermare direttamente se una casella di posta in arrivo è reale.

Metodi per convalidare l'indirizzo email in JavaScript

Ciascuno dei metodi descritti di seguito aggiunge un livello alla pila di validazione. Sono elencati dal più semplice al più completo. La maggior parte delle applicazioni in produzione ne utilizza almeno due, mentre i flussi di registrazione critici per la sicurezza li utilizzano tutti e quattro.

1. L'attributo HTML5 type="email"

Il punto di partenza più semplice per la validazione dell'indirizzo email tramite JavaScript è l'attributo HTML5 type="email" sull'elemento input. I browser applicano automaticamente la validazione di base del formato quando il modulo viene inviato.

<form>
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" required />
  <button type="submit">Submit</button>
</form>

Il browser verifica che il campo contenga il simbolo @ e una stringa simile a un dominio prima di consentire l'invio. La convalida viene eseguita di default al momento dell'invio.

Tuttavia, il controllo HTML5 è molto basilare. Accetta indirizzi come a@b o user@domain, anche se questi non riceverebbero mai email reali. Inoltre, non fornisce un feedback in tempo reale mentre l'utente digita. Pertanto, usatelo come punto di partenza: includetelo sempre, ma non affidatevi mai esclusivamente ad esso per il controllo.

2. Validazione tramite un pattern Regex

Le espressioni regolari (regex) sono il metodo JavaScript più comune per la validazione degli indirizzi email. Permettono di applicare il formato richiesto, prima dell'invio del modulo, e forniscono un feedback immediato.

Ecco un'espressione regolare di base che copre i formati validi più comuni:

function isValidEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

// Usage
console.log(isValidEmail("[email protected]"));  // true
console.log(isValidEmail("notanemail"));         // false

Comprendere lo schema:

• ^ — inizio della stringa
• [^\s@]+ — uno o più caratteri che non sono spazi bianchi o @
• @ — il simbolo @ letterale
• [^\s@]+ — uno o più caratteri dopo @ (il dominio)
• \. — un punto letterale
• [^\s@]+$ — uno o più caratteri dopo il punto (il TLD)

Per una convalida più rigorosa e conforme allo standard RFC 5322, è possibile utilizzare un modello più specifico:

function isValidEmail(email) {
  const regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*\.[a-zA-Z]{2,}$/;
  return regex.test(email);
}

Incapsulare l'espressione regolare in una funzione riutilizzabile come isValidEmail() mantiene la logica di validazione in un unico punto e ne semplifica l'aggiornamento.

La limitazione più grande è che le espressioni regolari controllano solo il formato. Non possono stabilire se un dominio esiste o se una casella di posta è reale. Un indirizzo come [email protected] Verrà comunque accettato perché il formato sembra valido, anche se il dominio è un errore di battitura e l'email probabilmente non verrà mai recapitata.

3. Utilizzo di una libreria di validazione JavaScript

Librerie consolidate come validator.js gestiscono molti casi che le espressioni regolari di base non riescono a rilevare, inclusi i domini internazionali, i formati email insoliti ma validi e le estensioni di dominio più recenti. Se la tua applicazione utilizza già un framework di validazione, una libreria rappresenta la scelta più pulita rispetto alla gestione di espressioni regolari personalizzate.

Installa validator.js:

npm install validator

Utilizzalo nel tuo codice:

import validator from 'validator';

function isValidEmail(email) {
  return validator.isEmail(email);
}

// Usage
console.log(isValidEmail("[email protected]"));   // true
console.log(isValidEmail("[email protected]"));          // false
console.log(isValidEmail("user@example"));       // false

Il metodo validator.isEmail() esegue un controllo del formato più completo rispetto a una semplice espressione regolare e individua molti problemi di formattazione comuni.

La limitazione è comunque la stessa: le librerie convalidano solo la struttura, non la consegnabilità. Un indirizzo come [email protected] Il test viene comunque superato perché il formato è tecnicamente corretto. Per i flussi di registrazione in produzione, dove la qualità della lista è importante, questo metodo richiede una chiamata API in aggiunta.

4. Convalida tramite API di convalida dell'email

L'approccio basato su API è l'unico metodo in grado di confermare l'effettiva esistenza di una casella di posta. I metodi descritti finora si limitano a convalidare il formato dell'indirizzo email. Un'API, invece, verifica se l'indirizzo può effettivamente ricevere email.

Migliori API di convalida email di DeBounce Verifica la sintassi, i record MX del dominio, l'esistenza della casella di posta, lo stato degli indirizzi temporanei, gli account di ruolo e il comportamento generale del dominio, tutto in un'unica chiamata API. Ecco un esempio che utilizza la funzione fetch() in JavaScript:

async function validateEmailWithAPI(email) {
  const apiKey = 'YOUR_DEBOUNCE_API_KEY';
  const url = `https://api.debounce.io/v1/?api=${apiKey}&email=${encodeURIComponent(email)}`;

  try {
    const response = await fetch(url);
    const data = await response.json();

    return {
      result: data.debounce?.result,
      reason: data.debounce?.reason,
      free_email: data.debounce?.free_email === "true" || data.debounce?.free_email === true,
      did_you_mean: data.debounce?.did_you_mean,
      role: data.debounce?.role === "true" || data.debounce?.role === true
    };
  } catch (error) {
    console.error('Validation error:', error);
    return null;
  }
}

I campi di risposta che interessano maggiormente agli sviluppatori sono:

• Risultato: il verdetto di livello superiore: "Sicuro da inviare", "Rischioso" o "Non valido"
• motivo — il risultato specifico: consegnabile, usa e getta, generico, errore di sintassi, ecc.
• did_you_mean — un indirizzo corretto se l'API rileva un errore di battitura comune (ad esempio, gmial.com → gmail.com)
• email_gratuita — indica se l'indirizzo appartiene a un provider gratuito come Gmail o Yahoo.

Per il rilevamento specifico delle email usa e getta lato client, DeBounce offre anche un API gratuita per email usa e getta che puoi richiamare direttamente dal browser senza esporre la tua chiave API principale.

Se preferisci non scrivere alcun codice, Widget di validazione JavaScript Si installa con un singolo tag script e gestisce la convalida direttamente sui moduli senza bisogno di integrazioni personalizzate.

Implementazione della convalida delle email in tempo reale

La convalida dell'indirizzo email in tempo reale migliora sia l'esperienza utente che la qualità dei dati, poiché consente agli utenti di correggere immediatamente gli errori anziché attendere l'invio del modulo. L'aspetto fondamentale è scegliere l'evento corretto in base al tipo di convalida che si sta eseguendo.

L'evento `oninput` si attiva a ogni pressione di un tasto, risultando utile per controlli rapidi come la validazione tramite espressioni regolari. L'evento `onchange` si attiva quando il campo perde il focus, risultando quindi più adatto alla validazione delle API, poiché attende che l'utente abbia terminato di digitare prima di inviare una richiesta.

Ecco una semplice configurazione in tempo reale che utilizza oninput e un controllo tramite espressioni regolari:

const emailInput = document.getElementById('email');
const feedbackEl = document.getElementById('email-feedback');

emailInput.addEventListener('input', function () {
  const email = this.value;

  if (email.length === 0) {
    feedbackEl.textContent = '';
    this.classList.remove('valid', 'invalid');
    return;
  }

  if (isValidEmail(email)) {
    this.classList.add('valid');
    this.classList.remove('invalid');
    feedbackEl.textContent = '✓ Looks good';
  } else {
    this.classList.add('invalid');
    this.classList.remove('valid');
    feedbackEl.textContent = 'Please enter a valid email address';
  }
});

Quando si utilizza un metodo API, è necessario effettuare un debounce della chiamata, attendendo che l'utente abbia interrotto la digitazione per 300-500 ms prima di inviare la richiesta. Questo evita di inviare una chiamata API per ogni pressione parziale di un tasto.

let debounceTimer;

emailInput.addEventListener('input', function () {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    validateEmailWithAPI(this.value).then(result => {
      if (result?.did_you_mean) {
        feedbackEl.textContent = `Did you mean ${result.did_you_mean}?`;
      }
    });
  }, 400);
});

Un buon feedback in tempo reale è chiaro e specifico. "Intendevi forse... [email protected]Il messaggio "?" è utile, mentre messaggi generici come "Indirizzo email non valido" frustrano gli utenti e aumentano l'abbandono dei moduli.

Validazione degli indirizzi email nei framework JavaScript più diffusi

Le librerie di moduli a livello di framework gestiscono la gestione dello stato, la visualizzazione degli errori e la logica di invio, quindi integrare la validazione di solito significa specificare una regola anziché collegare manualmente gli eventi.

Reagisci con React Hook Form:

import { useForm } from 'react-hook-form';

export default function SignupForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <input
        {...register('email', {
          required: 'Email is required',
          pattern: {
            value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
            message: 'Enter a valid email address'
          }
        })}
      />
      {errors.email && <span>{errors.email.message}</span>}
      <button type="submit">Sign up</button>
    </form>
  );
}

Vue con VeeValidate:

import { useField, useForm } from 'vee-validate';

export default {
  setup() {
    const { handleSubmit } = useForm();
    const { value: email, errorMessage } = useField('email', (val) => {
      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val) || 'Enter a valid email address';
    });

    const onSubmit = handleSubmit(values => console.log(values));

    return { email, errorMessage, onSubmit };
  }
};

Validazione dello schema con Zod:

import { z } from 'zod';

const emailSchema = z.string().email('Enter a valid email address');

function validateEmail(email) {
  const result = emailSchema.safeParse(email);
  return result.success ? null : result.error.issues[0].message;
}

In tutti e tre i casi, il framework gestisce la configurazione mentre tu fornisci la regola di validazione. Se in seguito sostituisci l'espressione regolare con una chiamata API, la struttura generale rimane sostanzialmente invariata.

I limiti della convalida dell'email lato client

La validazione lato client può verificare se un indirizzo email sembra valido, ma non può stabilire se l'indirizzo funziona effettivamente. Ecco alcuni problemi che JavaScript da solo non è in grado di rilevare.

1. Errori di battitura in domini dall'aspetto reale: indirizzi come [email protected], [email protected], o [email protected] Il formato dell'email viene superato anche se i domini sono scritti in modo errato. L'email non raggiunge mai l'utente e l'indirizzo rimane nella tua lista, generando messaggi di errore.
2. Indirizzi email temporanei e usa e getta: servizi come 10minutemail.com e guerrillamail.com creano caselle di posta temporanee che superano i controlli di validazione. Gli utenti spesso le utilizzano per evitare di compilare moduli di registrazione, dopodiché l'indirizzo scompare poco dopo.
3. Domini catch-all: Alcuni domini sono configurati per accettare qualsiasi email inviata, indipendentemente dal fatto che la casella di posta specifica esista o meno. Un indirizzo su un dominio catch-all supererà la convalida del formato, i controlli MX e persino alcuni controlli SMTP, ma risulterà comunque non recapitabile nella pratica.
4. Indirizzi basati sui ruoli: indirizzi come info@, sales@, admin@ e support@ sono generalmente gestiti da team anziché da singoli individui. Generano un maggior numero di reclami e sono solitamente una scelta inadatta per le liste di marketing. Un pattern regex non è in grado di identificarli in modo affidabile.
5. Spam trap: si tratta di indirizzi email utilizzati dalle organizzazioni di deliverability per identificare i mittenti con liste di contatti di scarsa qualità. Appaiono del tutto normali e superano la convalida lato client, ma inviare email a questi indirizzi può danneggiare la reputazione del mittente.

L'API di convalida delle email di DeBounce individua tutti e cinque i problemi tramite controlli in tempo reale a livello di casella di posta e dati di convalida continuamente aggiornati. Per mantenere la qualità dell'elenco a lungo termine, strumenti di verifica della posta elettronica È inoltre possibile ricontrollare in blocco i contatti più vecchi, contribuendo a rimuovere gli indirizzi che diventano non validi nel tempo.

Procedure consigliate per la convalida degli indirizzi email in JavaScript

Una buona validazione degli indirizzi email utilizza più controlli in combinazione per migliorare la qualità dei dati, l'esperienza utente e la deliverability.

• Stratifica la tua validazione: inizia con l'attributo email di HTML5, aggiungi un'espressione regolare o una libreria di validazione, quindi utilizza una chiamata API per la verifica a livello di casella di posta. Ogni livello individua i problemi che il precedente non rileva, mentre i controlli iniziali forniscono un feedback immediato senza dover attendere una richiesta di rete.
• Per i flussi critici per la sicurezza, non affidatevi mai esclusivamente alla convalida lato client: la convalida basata sul browser può essere aggirata, pertanto gli indirizzi email devono essere sempre convalidati nuovamente sul server prima di elaborare registrazioni, acquisti o creazione di account.
• Invece di gestire espressioni regolari personalizzate a lungo termine, è meglio utilizzare una libreria o un'API collaudata: i formati degli indirizzi email si evolvono. Una libreria o un'API attivamente mantenuta gestisce i nuovi casi limite senza richiedere l'aggiornamento dei propri modelli.
• Debuggare le chiamate API e fornire un feedback visivo chiaro: un indicatore di caricamento durante l'esecuzione dell'API, un segno di spunta verde in caso di successo e un messaggio di errore specifico in caso di errore ("Intendevi [email protected]?") mantenere il modulo reattivo e ridurre l'abbandono.
• Risultati della convalida dei log durante lo sviluppo: provider di posta elettronica temporanei, errori di battitura ripetuti e domini sospetti diventano evidenti una volta esaminati i log, facilitando nel tempo il perfezionamento delle regole di convalida.
• Convalida anche a livello di elenco: la convalida in tempo reale individua gli indirizzi non validi durante la registrazione, mentre Convalida dell'elenco e-mail Aiuta a rimuovere gli indirizzi che in seguito diventano inattivi.

Conclusione

La validazione HTML5 offre controlli di formattazione di base gratuiti. Le librerie di espressioni regolari e di validazione migliorano l'esperienza utente con un feedback rapido lato client, mentre le API verificano se una casella di posta esiste effettivamente e può ricevere email.

Quest'ultimo passaggio è fondamentale. La sola convalida lato client non è sufficiente a confermare che un indirizzo sia reale, attivo o sicuro per l'invio di email. Per i moduli di registrazione in produzione, dove la deliverability e la qualità della lista sono importanti, la convalida tramite API è ciò che impedisce l'inserimento nel database di indirizzi email temporanei, domini con errori di battitura, indirizzi catch-all e altri contatti non validi.

Il DeBounce API di convalida della posta elettronica aggiunge la verifica a livello di casella di posta direttamente al flusso di registrazione, aiutando a bloccare gli indirizzi non validi prima che influiscano sulla reputazione del mittente. Se desideri una configurazione più rapida, Widget di validazione JavaScript Offre un metodo senza codice per aggiungere la convalida dell'indirizzo email in tempo reale direttamente ai moduli.