Validación de correo electrónico HTML5

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 de correo electrónico o URL válida".

¿Cómo puedo validar el correo electrónico después de que ingrese un usuario? 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 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:

La input type=emailpágina 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 requiredatributo y un patternatributo para requerir que el valor coincida con el patrón de expresiones regulares.

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

Utilizando [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 cierto cuando el campo está vacío o es válido. Esto también tiene algunas otras banderas interesantes:

Probado en Chrome.

Este es el ejemplo que utilizo para todas las entradas de correo electrónico de mi formulario. Este ejemplo es ASP.NET, pero se aplica a cualquiera:

<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 necesario. Aún no he encontrado uno que sea un falso positivo.

Esto se representa como 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!#$%&amp;'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*">

Sé que no buscas la solución de Javascript, sin embargo, 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('');
        }
    });
})

Un poco tarde para la fiesta, pero esta expresión regular me ayudó a validar la entrada del tipo de correo electrónico en el lado del cliente. Sin embargo, siempre debemos hacer la verificación en el lado del servidor también.

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

Puede encontrar más expresiones regulares de todo tipo aquí .

TL; DR: 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 la dirección de correo electrónico dada. 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.

Respuesta larga:

David Gilbertson escribió sobre esto hace años:

Hay dos preguntas que debemos hacer:

1. ¿Entendió el usuario que se suponía que debía escribir una dirección de correo electrónico en este campo?
2. ¿El usuario escribió correctamente su propia 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 alguna parte, entonces es seguro decir que entendió que se suponía que debía ingresar una dirección de correo electrónico. Fácil.

A continuación, queremos hacer una validación para determinar si ingresaron correctamente su dirección de correo electrónico.

Imposible.

[...]

Cualquier mistype será sin duda resultará en una incorrecta dirección de correo electrónico, pero sólo tal vez dar lugar a un inválidos dirección de correo electrónico.

[...]

No tiene sentido intentar averiguar 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 que ingrese una no válida .

En otras palabras, es importante tener en cuenta que cualquier tipo de validación basada en cadenas solo puede verificar si la sintaxis no es válida. No puede verificar si el usuario realmente puede ver el correo electrónico (por ejemplo, porque el usuario ya perdió las credenciales, la dirección escrita de otra persona o el correo electrónico del trabajo en lugar de la dirección de correo electrónico personal para un caso de uso determinado). ¿Con qué frecuencia la pregunta que realmente busca es " este correo electrónico es sintácticamente válido " en lugar de " puedo comunicarme con el usuario usando la dirección de correo electrónico dada "? Si valida la cadena más de "¿contiene @", está tratando de responder la pregunta anterior! Personalmente, siempre estoy interesa la última pregunta únicamente.

Además, algunas direcciones de correo electrónico que pueden ser sintáctica o políticamente inválidas funcionan. Por ejemplo, postmaster@aitécnicamente funciona aunque los TLD no deberían tener registros MX . También vea la discusión sobre la validación de correo electrónico en la lista de correo WHATWG (donde HTML5 está diseñado en primer lugar).

Usando HTML 5, simplemente haga que el correo electrónico de entrada sea como:

<input type="email"/>

Cuando el usuario se desplaza sobre el cuadro de entrada, aparecerá una información sobre herramientas indicándole que ingrese un correo electrónico válido. Sin embargo, los formularios Bootstrap tienen un mensaje de información sobre herramientas mucho mejor para decirle al usuario que ingrese una dirección de correo electrónico y aparece en el momento en que el valor ingresado no coincide con un correo electrónico válido.

Puedes seguir este patrón también

<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: En W3Schools

Según MDN , esta RegExp está bien para validar correos electrónicos, ya que los correos electrónicos que cumplen con las especificaciones deben coincidir.

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

Es muy difícil validar el correo electrónico correctamente simplemente usando el atributo HTML5 "patrón". Si no utiliza un "patrón", alguien @ será procesado. que NO es un correo electrónico válido.

El uso 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, puede colocarpattern="[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. Entonces, en cuanto a simplemente usar HTML5 para validar direcciones de correo electrónico, todavía no está del todo 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.