Convalida email HTML5

Si dice "Con HTML5, non abbiamo più bisogno di js o di un codice lato server per verificare se l'input dell'utente è un indirizzo email o URL valido"

Come posso convalidare l'email dopo che un utente è entrato? e senza JS come visualizzare un messaggio se l'utente inserisce una forma sbagliata del suo indirizzo email.

<input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email">
<input type="submit" value="Submit">

In HTML5 puoi fare così:

<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>

E quando l'utente preme Invia, mostra automaticamente un messaggio di errore come:

La input type=emailpagina del sito www.w3.org rileva che un indirizzo di posta elettronica è una qualsiasi stringa che corrisponde alla seguente espressione regolare:

/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

Utilizza l' requiredattributo e un patternattributo per richiedere che il valore corrisponda al pattern regex.

<input
    type="text"
    pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
    required
>

Utilizzo [a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}per somemail@email.com/somemail@email.com.vn

document.getElementById("email").validity.valid

sembra essere vero quando il campo è vuoto o valido. Questo ha anche altre bandiere interessanti:

Testato in Chrome.

Ecco l'esempio che uso per tutti i miei input di posta elettronica del modulo. Questo esempio è ASP.NET, ma si applica a qualsiasi:

<asp:TextBox runat="server" class="form-control" placeholder="Contact's email" 
    name="contact_email" ID="contact_email" title="Contact's email (format: xxx@xxx.xxx)" 
    type="email" TextMode="Email" validate="required:true"
    pattern="[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*" >
</asp:TextBox>

HTML5 convalida ancora utilizzando il modello quando non richiesto. Non ne ho ancora trovato uno che fosse un falso positivo.

Viene visualizzato come il seguente HTML:

<input class="form-control" placeholder="Contact's email" 
    name="contact_email" id="contact_email" type="email" 
    title="Contact's email (format: xxx@xxx.xxx)" 
    pattern="[a-zA-Z0-9!#$%&amp;'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*">

So che non stai cercando la soluzione Javascript, tuttavia ci sono alcune cose come il messaggio di convalida personalizzato che, dalla mia esperienza, può essere fatto solo usando JS.

Inoltre, utilizzando JS, puoi aggiungere dinamicamente la convalida a tutti i campi di input di tipo email all'interno del tuo sito invece di dover modificare ogni singolo campo di input.

var validations ={
    email: [/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/, 'Please enter a valid email address']
};
$(document).ready(function(){
    // Check all the input fields of type email. This function will handle all the email addresses validations
    $("input[type=email]").change( function(){
        // Set the regular expression to validate the email 
        validation = new RegExp(validations['email'][0]);
        // validate the email value against the regular expression
        if (!validation.test(this.value)){
            // If the validation fails then we show the custom error message
            this.setCustomValidity(validations['email'][1]);
            return false;
        } else {
            // This is really important. If the validation is successful you need to reset the custom error message
            this.setCustomValidity('');
        }
    });
})

Un po 'in ritardo per la festa, ma questa espressione regolare mi ha aiutato a convalidare l'input del tipo di posta elettronica sul lato client. Tuttavia, dovremmo sempre eseguire la verifica anche sul lato server.

<input type="email" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$">

Puoi trovare più espressioni regolari di tutti i tipi qui .

TL; DR: l'unico metodo corretto al 100% è controllare la presenza di @ -sign da qualche parte nell'indirizzo e-mail inserito e quindi pubblicare un messaggio di convalida all'indirizzo e-mail specificato. Se possono seguire le istruzioni di convalida nel messaggio di posta elettronica , l'indirizzo e-mail immesso è corretto.

Risposta lunga:

David Gilbertson ha scritto su questo anni fa:

Ci sono due domande che dobbiamo porre:

1. L'utente ha capito che avrebbe dovuto digitare un indirizzo e-mail in questo campo?
2. L'utente ha digitato correttamente il proprio indirizzo email in questo campo?

Se hai un modulo ben strutturato con un'etichetta che dice "e-mail" e l'utente inserisce un simbolo "@" da qualche parte, allora è sicuro che ha capito che avrebbe dovuto inserire un indirizzo e-mail. Facile.

Successivamente, vogliamo eseguire alcune convalide per accertare se hanno inserito correttamente il loro indirizzo email.

Non possibile.

[...]

Qualsiasi mistype sarà sicuramente portare ad un errato indirizzo e-mail, ma solo forse risultare in un invalido indirizzo email .

[...]

Non ha senso cercare di capire se un indirizzo e-mail è "valido". È molto più probabile che un utente inserisca un indirizzo e-mail errato e valido piuttosto che inserirne uno non valido .

In altre parole, è importante notare che qualsiasi tipo di convalida basata su stringa può verificare solo se la sintassi non è valida. Non può verificare se l'utente può effettivamente vedere l'e-mail (ad es. Perché l'utente ha già perso le credenziali, l'indirizzo digitato di qualcun altro o l'email di lavoro digitato invece dell'indirizzo email personale per un determinato caso d'uso). Quante volte la domanda che stai cercando è " questa email è sintatticamente valida " invece di " posso comunicare con l'utente utilizzando l'indirizzo email fornito "? Se convalidi la stringa più di "contiene @", stai cercando di rispondere alla domanda precedente! Personalmente, sono sempre interessato solo a quest'ultima domanda.

Inoltre, alcuni indirizzi e-mail che potrebbero essere sintatticamente o politicamente non validi, funzionano. Ad esempio, postmaster@aitecnicamente funziona anche se i TLD non dovrebbero avere record MX . Vedi anche la discussione sulla convalida della posta elettronica sulla mailing list WHATWG (dove HTML5 è progettato in primo luogo).

Utilizzando HTML 5, crea semplicemente l'email di input come:

<input type="email"/>

Quando l'utente passa con il mouse sopra la casella di input, visualizzerà un suggerimento che lo istruirà a inserire un'e-mail valida. Tuttavia, i moduli Bootstrap hanno un messaggio di descrizione comando molto migliore per dire all'utente di inserire un indirizzo e-mail e viene visualizzato nel momento in cui il valore inserito non corrisponde a un'e-mail valida.

Puoi anche seguire questo schema

<form action="/action_page.php">
  E-mail: <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="submit">
</form>

Rif: In W3Schools

Secondo MDN , questa RegExp va bene per convalidare le e-mail, poiché le e-mail che soddisfano le specifiche dovrebbero corrispondere.

/^[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])?)*$/

È molto difficile convalidare correttamente l'email utilizzando semplicemente l'attributo HTML5 "pattern". Se non usi un "pattern" qualcuno @ verrà processato. che NON è un indirizzo email valido.

L'uso pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"richiederà che il formato sia, someone@email.comtuttavia se il mittente ha un formato simile someone@email.net.au(o simile) non sarà convalidato per risolvere questo problema potresti inserirepattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" questo convaliderà ".com.au o .net.au o simili.

Tuttavia, utilizzando questo, non consentirà a qualcuno@email.com di convalidare. Quindi, per quanto riguarda il semplice utilizzo di HTML5 per convalidare gli indirizzi e-mail, non è ancora totalmente con noi. Per completare questo dovresti usare qualcosa del genere:

<form>
<input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">
</form>

o:

<form>
<input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">
</form>

Tuttavia, non so come convalidare entrambe o tutte le versioni di indirizzi e-mail utilizzando l'attributo pattern HTML5.