Se dice "Con HTML5, no necesitamos más js o un código del lado del servidor para comprobar si la entrada del usuario' es una dirección de correo electrónico o url válida"
¿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">
En HTML5 se puede hacer así:
<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>
Y cuando el usuario pulsa enviar, automáticamente muestra un mensaje de error como:
La página 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-]+)*$/
Utilice el atributo required
y un atributo pattern
para exigir que el valor coincida con el patrón regex.
<input
type="text"
pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
required
>
Es muy difícil validar correctamente el correo electrónico simplemente utilizando el atributo HTML5 "patrón". Si no se utiliza un "patrón" se procesará alguien@. que NO es un correo electrónico válido.
Using 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 será validado para solucionar esto 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, utilizando esto, no permitirá [email protected] para validar. Así que en lo que respecta a la utilización de HTML5 para validar las direcciones de correo electrónico todavía no es totalmente con nosotros. Para Completar esto usted 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 las direcciones de correo electrónico utilizando el atributo de patrón HTML5.