Validação de e-mail HTML5

Diz-se "Com HTML5, não precisamos mais de js ou de um código do lado do servidor para verificar se a entrada do usuário é um endereço de e-mail ou url válido"

Como posso validar o e-mail após a entrada do usuário? e sem JS como exibir uma mensagem se o usuário inserir uma forma errada de seu endereço de e-mail.

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

Em HTML5, você pode fazer assim:

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

E quando o usuário pressiona enviar, ele mostra automaticamente uma mensagem de erro como:

A input type=emailpágina do site www.w3.org observa que um endereço de e-mail é qualquer string que corresponda à seguinte expressão regular:

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

Use o requiredatributo e um patternatributo para exigir que o valor corresponda ao padrão regex.

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

Usando [a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}para [email protected]/[email protected]

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

parece ser verdadeiro quando o campo está vazio ou é válido. Isso também tem alguns outros sinalizadores interessantes:

Testado no Chrome.

Aqui está o exemplo que uso para todas as minhas entradas de email de formulário. Este exemplo é ASP.NET, mas se aplica a qualquer:

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

O HTML5 ainda valida o uso do padrão quando não é obrigatório. Ainda não encontrei um que fosse um falso positivo.

Isso é processado como o seguinte HTML:

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

Eu sei que você não está atrás da solução Javascript, no entanto, existem algumas coisas como a mensagem de validação personalizada que, pela minha experiência, só pode ser feita usando JS.

Além disso, usando JS, você pode adicionar dinamicamente a validação a todos os campos de entrada do tipo e-mail em seu site, em vez de ter que modificar cada campo de entrada.

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('');
        }
    });
})

Um pouco tarde para a festa, mas essa expressão regular me ajudou a validar a entrada do tipo de e-mail no lado do cliente. Porém, devemos sempre fazer a verificação no lado do servidor também.

<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})(\]?)$">

Você pode encontrar mais regex de todos os tipos aqui .

TL; DR: O único método 100% correto é verificar se há @ -sign em algum lugar do endereço de e-mail inserido e, em seguida, postar uma mensagem de validação no endereço de e-mail fornecido. Se eles puderem seguir as instruções de validação na mensagem de e-mail , o endereço de e-mail inserido está correto.

Resposta longa:

David Gilbertson escreveu sobre isso anos atrás:

Precisamos fazer duas perguntas:

1. O usuário entendeu que deveria digitar um endereço de e-mail neste campo?
2. O usuário digitou corretamente seu próprio endereço de e-mail neste campo?

Se você tiver um formulário bem organizado com um rótulo que diz “e-mail”, e o usuário inserir um símbolo '@' em algum lugar, é seguro dizer que ele entendeu que deveria estar inserindo um endereço de e-mail. Fácil.

Em seguida, queremos fazer alguma validação para verificar se eles inseriram corretamente seu endereço de e-mail.

Não é possivel.

[...]

Qualquer mistype vai definitivamente resultar em um incorreto endereço de e-mail, mas apenas talvez resultar em um inválido endereço de e-mail.

[...]

Não adianta tentar descobrir se um endereço de e-mail é 'válido'. É muito mais provável que um usuário insira um endereço de e-mail válido e errado do que um inválido .

Em outras palavras, é importante notar que qualquer tipo de validação baseada em string só pode verificar se a sintaxe é inválida. Ele não pode verificar se o usuário pode realmente ver o e-mail (por exemplo, porque o usuário já perdeu credenciais, digitou o endereço de outra pessoa ou digitou o e-mail de trabalho em vez do endereço de e-mail pessoal para um determinado caso de uso). Com que frequência a pergunta que você realmente quer é " este e-mail é sintaticamente válido " em vez de " posso me comunicar com o usuário usando o endereço de e-mail fornecido "? Se você validar a string mais do que "contém @", você está tentando responder à pergunta anterior! Pessoalmente, estou sempre interessado apenas na última questão.

Além disso, alguns endereços de e-mail que podem ser sintaticamente ou politicamente inválidos, funcionam. Por exemplo, postmaster@aitecnicamente funciona mesmo que os TLDs não devam ter registros MX . Veja também a discussão sobre validação de e-mail na lista de e-mails WHATWG (onde HTML5 é projetado em primeiro lugar).

Usando HTML 5, basta fazer o e-mail de entrada como:

<input type="email"/>

Quando o usuário passa o mouse sobre a caixa de entrada, ele exibe uma dica de ferramenta instruindo-o a inserir um e-mail válido. No entanto, os formulários do Bootstrap têm uma mensagem de dica de ferramenta muito melhor para dizer ao usuário para inserir um endereço de e-mail e ela aparece no momento em que o valor inserido não corresponde a um e-mail válido.

Você pode seguir este padrão também

<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>

Ref: Em W3Schools

De acordo com o MDN , este RegExp é adequado para validar e-mails, pois os e-mails que atendem às especificações devem corresponder a ele.

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

É muito difícil validar o e-mail corretamente simplesmente usando o atributo "padrão" do HTML5. Se você não usar um "padrão" alguém @ será processado. que NÃO é um e-mail válido.

O uso pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"exigirá que o formato seja, [email protected]no entanto, se o remetente tiver um formato semelhante [email protected](ou semelhante) não será validado para corrigir isso, você pode colocar pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"isso validará ".com.au ou .net.au ou semelhante.

No entanto, usando isso, não permitirá que algué[email protected] valide. Portanto, usar o HTML5 para validar endereços de e-mail ainda não está totalmente entre nós. Para completar, você usaria algo assim:

<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>

ou:

<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>

No entanto, não sei como validar ambas ou todas as versões de endereços de e-mail usando o atributo de padrão HTML5.