Validação de E-mail HTML5
é dito "com HTML5, não precisamos de mais JS ou um código do lado do servidor para verificar se a entrada do Usuário é um e-mail ou endereço url válido"
Como posso validar o e-mail depois de um utilizador entrar? e sem JS como exibir uma mensagem se o usuário digitar uma forma errada de seu endereço de E-mail.
<input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email">
<input type="submit" value="Submit">
8 answers
Em HTML5 podes fazer assim:
<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>
E quando o utilizador carrega no submit, mostra automaticamente uma mensagem de erro como:
A input type=email página do www.w3.org o site observa que um endereço de E-mail é qualquer texto que corresponda à seguinte expressão regular:
/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
Use o atributo required e um atributo pattern 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
>
Utilizar [a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,} para [email protected] / [email protected]
Aqui está o exemplo que eu uso para todas as entradas do meu formulário de email. Este exemplo é ASP.NET, mas aplica-se 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 usando o padrão quando não é necessário. Ainda não encontrei um falso positivo.
Isto torna 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!#$%&'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*">
document.getElementById("email").validity.valid
Parece ser verdadeiro quando o campo está vazio ou válido. Isto também tem algumas outras bandeiras interessantes:
Testado em cromado.
Eu sei que você não está atrás da solução Javascript no entanto há algumas coisas, como a mensagem de validação personalizada que, a partir da minha experiência, só pode ser feito usando JS.
Também, usando JS, você pode adicionar dinamicamente a validação a todos os campos de entrada do tipo email dentro do 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('');
}
});
})
É muito difícil validar o Email correctamente usando simplesmente o atributo HTML5 "pattern". Se você não usar um "padrão" alguém@ será processado. que não é um email válido.
Se usar pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" irá necessitar que o formato seja [email protected] no entanto, se o remetente tiver um formato como [email protected] (ou semelhante) não será validado para corrigir isto, poderá 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,}" Isto irá validar ".com.au ou .net.au ou iguais.
<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 padrão HTML5.
O único método 100% correcto é verificar se o @-sign está algures no endereço de E-mail introduzido e depois enviar uma mensagem de validação para o endereço de E-mail indicado. Se eles podem seguir as instruções de validação na mensagem de E-mail, o endereço de E-mail embutido está correto.
Não possivel.
[...]
Qualquer tipo de erro irá definitivamente resultar num endereço de E-mail incorrecto, mas apenas talvez resulte num endereço de E-mail inválido.
[...]
Não vale a pena tentar descobrir se um endereço de E-mail é 'válido'. É muito mais provável que um Utilizador introduza um endereço de E-mail errado e válido do que introduzir um inválido.
Além disso, alguns endereços de E-mail que podem seja sintaticamente ou politicamente inválido, Faça trabalho. Por exemplo, postmaster@ai funciona tecnicamente, mesmo que os TLDs não devam ter registos MX . Ver também discussão sobre validação de E-mail na lista de correio do WHATWG (onde o HTML5 foi concebido em primeiro lugar).