validacion - Validación de correo electrónico HTML5
validar formulario javascript html5 (8)
El único método 100% correcto es buscar @ -sign en algún lugar de la dirección de correo electrónico ingresada y luego publicar un mensaje de validación en una dirección de correo electrónico determinada. Si pueden seguir las instrucciones de validación en el mensaje de correo electrónico, la dirección de correo electrónico ingresada es correcta.
David Gilbertson escribió sobre esto hace años:
Hay dos preguntas que debemos hacernos:
- ¿ Comprendió el usuario que se suponía que debía escribir una dirección de correo electrónico en este campo?
- ¿El usuario ingresó correctamente su dirección de correo electrónico en este campo?
Si tiene un formulario bien diseñado con una etiqueta que dice "correo electrónico", y el usuario ingresa un símbolo "@" en algún lugar, entonces es seguro decir que entendió que se suponía que debía ingresar una dirección de correo electrónico. Fácil.
Luego, queremos hacer una validación para determinar si ingresaron correctamente su dirección de correo electrónico.
Imposible.
[...]
Cualquier tipo de error definitivamente dará como resultado una dirección de correo electrónico incorrecta, pero solo puede dar como resultado una dirección de correo electrónico no válida.
[...]
No tiene sentido tratar de determinar si una dirección de correo electrónico es ''válida''. Es mucho más probable que un usuario ingrese una dirección de correo electrónico incorrecta y válida que ingresar una inválida .
Además, algunas direcciones de correo electrónico que pueden ser inválidas sintáctica o políticamente, funcionan. Por ejemplo, serverfault.com/q/154991/104798 . También vea la discusión sobre la validación del correo electrónico en la lista de correo de WHATWG (donde HTML5 está diseñado en primer lugar).
Se dice "con HTML5, no necesitamos más js o un código del lado del servidor para verificar si la entrada del usuario es una dirección válida de correo electrónico o url"
¿Cómo puedo validar el correo electrónico después de que un usuario ingrese? y sin JS cómo mostrar un mensaje si el usuario ingresa una forma incorrecta de su dirección de correo electrónico.
<input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email">
<input type="submit" value="Submit">
El input type=email página de input type=email del sitio www.w3.org señala que una dirección de correo electrónico es cualquier cadena que coincida con la siguiente expresión regular:
/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:/.[a-zA-Z0-9-]+)*$/
Use el atributo required y un atributo de pattern para requerir que el valor coincida con el patrón de expresión regular.
<input
type="text"
pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:/.[a-zA-Z0-9-]+)*$/"
required
>
En HTML5 puedes hacer esto:
<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>
Y cuando el usuario presiona enviar, automáticamente muestra un mensaje de error como:
Es muy difícil validar el correo electrónico correctamente simplemente usando el atributo "patrón" de HTML5. Si no usa un "patrón", alguien @ será procesado. que NO es un correo electrónico válido
Usando pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" requerirá que el formato sea [email protected] sin embargo, si el remitente tiene un formato como [email protected] (o similar) no se validará para solucionarlo. podría poner pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" esto validará" .com.au o .net.au o similar.
Sin embargo, al usar esto, no permitirá que [email protected] valide. Por lo tanto, hasta el simple hecho de usar HTML5 para validar las direcciones de correo electrónico todavía no está totalmente con nosotros. Para completar esto, usaría algo como esto:
<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>
Sin embargo, no sé cómo validar ambas o todas las versiones de direcciones de correo electrónico utilizando el atributo de patrón HTML5.
Este es el ejemplo que uso para todas mis entradas de correo electrónico de formulario. Este ejemplo es ASP.NET, pero se aplica a cualquier:
<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>
HTML5 todavía valida el uso del patrón cuando no es obligatorio. Aún no hemos encontrado uno que sea un falso positivo.
Esto representa el siguiente 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-]+)*">
Sé que no buscas la solución de Javascript, pero hay algunas cosas como el mensaje de validación personalizado que, según mi experiencia, solo se puede hacer con JS.
Además, al usar JS, puede agregar dinámicamente la validación a todos los campos de entrada de tipo correo electrónico dentro de su sitio en lugar de tener 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('''');
}
});
})
Usando [a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,} para algunos [email protected] / [email protected]
