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

75
2017-10-26 10:48


origen


Respuestas:


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:

Error Message


95
2017-10-26 10:56



los input type=email página de la www.w3.org el sitio 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-]+)*$/

Utilizar el required atributo y una pattern atributo 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
>

24
2017-10-09 07:31



Utilizando [a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,} para somemail@email.com / somemail@email.com.vn


8
2017-11-20 04:41



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

5
2018-05-19 07:04



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

4
2018-02-17 01:35



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:

enter image description here

Probado en Chrome.


4
2018-03-28 17:17



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

Utilizando pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" requerirá que el formato sea someone@email.com Sin embargo, si el remitente tiene un formato como someone@email.net.au (o similar) no será validado para arreglar 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, al usar esto, no permitirá que alguien@email.com 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.


1
2018-03-26 08:57



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

Hay dos preguntas que debemos hacernos:

  1. Hizo el usuario entiendo que se suponía que escribieran un correo electrónico   dirección en este campo?
  2. Hizo el usuario escribe correctamente su correo electrónico   dirección 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, luego   es seguro decir que entendieron que se suponía que eran   ingresando una dirección de correo electrónico Fácil.

A continuación, queremos hacer una validación para determinar si son correctos   ingresó su dirección de correo electrónico.

Imposible.

[...]

Cualquier tipo de error seguro dar como resultado una dirección de correo electrónico incorrecta, pero solo tal vez 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 un error y valido dirección de correo electrónico de lo que son para ingresar un uno inválido.

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


0
2018-05-29 06:28