span - Atributo de patrón de entrada de correo electrónico HTML5

javascript title

Question

Estoy tratando de hacer un formulario html5 que contenga una entrada de correo electrónico, una entrada de casilla de verificación y una entrada de envío. Estoy tratando de usar el atributo de patrón para la entrada de correo electrónico, pero no sé qué colocar en este atributo. Sé que se supone que debo usar una expresión regular que debe coincidir con la producción del patrón de JavaScript, pero no sé cómo hacerlo.

Lo que estoy tratando de hacer para que funcione este atributo es verificar que el correo electrónico contenga un @ y al menos uno o más puntos y, si es posible, verificar si la dirección después de @ es una dirección real. Si no puedo hacer esto a través de este atributo, consideraré usar JavaScript, pero para verificar un @ y uno o más puntos, quiero usar el atributo de patrón.

el atributo de patrón necesita verificar:

1. solo uno @
2. uno o más puntos
3. y si es posible, compruebe si la dirección después de @ es una dirección válida

Una alternativa a esta es usar un JavaScript pero para todas las demás condiciones no quiero usar un JavaScript

Answer 1

Utilicé el siguiente Regex para satisfacer los siguientes correos electrónicos.

[email protected] # Minimum three characters
[email protected] # Accepts Caps as well.
[email protected] # Accepts . before @

Código

<input type="email" pattern="[A-Za-z0-9._%+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})" />

Answer 2

Desafortunadamente, todas las sugerencias, excepto las de B-Money, son inválidas para la mayoría de los casos.

Aquí hay una gran cantidad de correos electrónicos válidos como:

• gü[email protected] (diéresis alemana)
• антон@россия.рф (ruso, рф es un dominio válido)
• Chino y muchos otros idiomas (ver, por ejemplo, correo electrónico internacional y especificaciones vinculadas).

Debido a la complejidad para obtener la validación correcta, propongo una solución muy genérica:

<input type="text" pattern="[^@/s]+@[^@/s]+/.[^@/s]+" title="Invalid email address" />

Comprueba si el correo electrónico contiene al menos un carácter (también número o lo que sea, excepto otro "@" o espacio en blanco) antes de "@", al menos dos caracteres (o lo que sea, excepto otro "@" o espacio en blanco) después de "@" y un punto en Entre. Este patrón no acepta direcciones como lol @ company, algunas veces utilizadas en redes internas. Pero este podría ser usado, si es requerido:

<input type="text" pattern="[^@/s]+@[^@/s]+" title="Invalid email address" />

Ambos patrones también aceptan correos electrónicos menos válidos, por ejemplo, correos electrónicos con pestaña vertical. Pero para mí es lo suficientemente bueno. Las comprobaciones más sólidas, como intentar conectarse al servidor de correo o al dominio de ping, deben realizarse de todos modos en el lado del servidor.

Por cierto, acabo de escribir una directiva angular (todavía no está bien probada) para la validación de correo electrónico con novalidate y sin el patrón anterior para admitir el principio DRY:

.directive(''isEmail'', [''$compile'', ''$q'', ''t'', function($compile, $q, t) {
    var EMAIL_PATTERN = ''^[^@//s]+@[^@//s]+//.[^@//s]+$'';
    var EMAIL_REGEXP = new RegExp(EMAIL_PATTERN, ''i'');
    return {
        require: ''ngModel'',
        link: function(scope, elem, attrs, ngModel){
            function validate(value) {
                var valid = angular.isUndefined(value)
                    || value.length === 0
                    || EMAIL_REGEXP.test(value);
                ngModel.$setValidity(''email'', valid);
                return valid ? value : undefined;
            }
            ngModel.$formatters.unshift(validate);
            ngModel.$parsers.unshift(validate);
            elem.attr(''pattern'', EMAIL_PATTERN);
            elem.attr(''title'', ''Invalid email address'');
        }
    };
}])

Uso:

<input type="text" is-email />

Para B-Money, el patrón es "@" lo suficiente. Pero declina dos o más "@" y todos los espacios.

Answer 3

En HTML5 puede usar el nuevo tipo de "correo electrónico": http://www.w3.org/TR/html-markup/input.email.html

Por ejemplo:

<input type="email" id="email" />

Si el navegador implementa HTML5, se asegurará de que el usuario haya ingresado una dirección de correo electrónico válida en el campo. Tenga en cuenta que si el navegador no implementa HTML5, será tratado como un tipo de ''texto'', es decir:

<input type="text" id="email" />

Answer 4

Este es el enfoque que estoy usando y puede modificarlo según sus necesidades:

<input name="email" type="email" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+/.[A-Za-z]{1,63}$" class="form-control" placeholder="Email*" id="email" required="">

Explicación:

1. Queremos asegurarnos de que la dirección de correo electrónico siempre comience con una palabra:

   ^ [/ w]

Una palabra es cualquier carácter, dígito o guión bajo. Puede usar el patrón [a-zA-Z0-9_], pero le dará el mismo resultado y es más largo.

2. A continuación, queremos asegurarnos de que haya al menos uno de estos caracteres:

   ^ [/ w] {1,}

3. A continuación, queremos permitir cualquier palabra, dígito o caracteres especiales en el nombre. De esta manera, podemos estar seguros de que el correo electrónico no comenzará con el punto, pero puede contener el punto en otra posición que no sea la primera posición:

   ^ [/ w] {1,} [/ w. + -]

4. Y, por supuesto, no tiene que haber ningún carácter así porque la dirección de correo electrónico solo puede tener una letra seguida de @:

   ^ [/ w] {1,} [/ w. + -] {0,}

5. A continuación, necesitamos el carácter @, que es obligatorio, pero solo puede haber uno en todo el correo electrónico:

   ^ [/ w] {1,} [/ w. + -] {0,} @

6. Justo detrás del carácter @, queremos el nombre de dominio. Aquí, puede definir cuántos caracteres desea como mínimo y desde qué rango de caracteres. Elegiría todos los caracteres de las palabras, incluido el guión [/ w-], y quiero al menos dos de ellos {2,} . Si desea permitir dominios como t.co , debería permitir un carácter de este rango {1,} :

   ^ [/ w] {1,} [/ w. + -] {0,} @ [/ w -] {2,}

7. A continuación, tenemos que tratar con dos casos. O bien solo existe el nombre del dominio seguido de la extensión del dominio, o hay un nombre del subdominio seguido del nombre del dominio seguido de la extensión, por ejemplo, abc.com versus abc.co.uk. Para hacer que esto funcione, necesitamos usar el token (a | b) donde a representa el primer caso, b representa el segundo caso y | significa OR lógico. En el primer caso, trataremos solo con la extensión de dominio, pero dado que siempre estará allí, sin importar el caso, podemos agregarlo de forma segura a ambos casos:

   ^ [/ w] {1,} [/ w. + -] {0,} @ [/ w -] {2,} ([.] [a-zA-Z] {2,} | [.] [ a-zA-Z] {2,})

Este patrón dice que necesitamos exactamente un carácter de punto seguido de letras, sin dígitos, y queremos al menos dos de ellos, en ambos casos.

8. Para el segundo caso, agregaremos el nombre de dominio al frente de la extensión de dominio, haciendo que el nombre de dominio original sea un subdominio:

   ^ [/ w] {1,} [/ w. + -] {0,} @ [/ w -] {2,} ([.] [a-zA-Z] {2,} | [.] [ / w -] {2,} [.] [a-zA-Z] {2,})

El nombre de dominio puede consistir en caracteres de palabras, incluido el guión, y nuevamente, queremos al menos dos caracteres aquí.

9. Finalmente, necesitamos marcar el final de todo el patrón:

   ^ [/ w] {1,} [/ w. + -] {0,} @ [/ w -] {2,} ([.] [a-zA-Z] {2,} | [.] [ / w -] {2,} [.] [a-zA-Z] {2,}) $

10. Vaya aquí y pruebe si su correo electrónico coincide con el patrón: https://regex101.com/r/374XLJ/1

Answer 5

Este es un problema dual (como muchos en el mundo www).

Debe evaluar si el navegador admite html5 (uso Modernizr para hacerlo). En este caso, si tiene una forma normal, el navegador hará el trabajo por usted, pero si necesita ajax / json (como muchos de los casos cotidianos), de todos modos necesita realizar una verificación manual.

.. entonces, mi sugerencia es usar una expresión regular para evaluar en cualquier momento antes de enviar. La expresión que uso es la siguiente:

var email: /^[a-z0-9._%+-]+@[a-z0-9.-]+/.[a-z]{2,4}$/;

Este es tomado de http://www.regular-expressions.info/ . Este es un mundo difícil de entender y dominar, por lo que le sugiero que lea esta página detenidamente.

Answer 6

He probado la siguiente expresión regular que da el mismo resultado que la validación de entrada de correo electrónico de Chrome Html.

[a-z0-9!#$%&''*+//=?^_`{|}~.-]+@[a-z0-9-]+(/.[a-z0-9-]+)*

Puedes probarlo en este sitio web: regex101

Answer 7

Respuesta actualizada 2018

Vaya aquí http://emailregex.com/

Javascript: / ^ (([^ <> () [] /.,;: / S @ "] + (. [^ <> () [] /.,;: / S @"] +) *) | (". +")) @ (([[0-9] {1,3}. [0-9] {1,3}. [0-9] {1,3}. [0-9] { 1,3}]) | (([a-zA-Z-0-9] +.) + [A-zA-Z] {2,})) $ /

Answer 8

Tuve este problema exacto con la entrada de correo electrónico de HTML5, utilizando la respuesta de Alwin Keslers. Agregué la expresión regular a la entrada de correo electrónico de HTML5, por lo que el usuario debe tener algo al final.

<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+/.[a-z]{2,4}$" />

Answer 9

Una solución más que está construida sobre la especificación w3org.
El regex original está tomado de w3org .
El último " * Cuidador cuantificador" en esta expresión regular fue reemplazado por " + Uno o más cuantificadores".
Dicho patrón cumple totalmente con la especificación, con una excepción: no permite direcciones de dominio de nivel superior como " foo @ com "

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

Answer 10

Probablemente quieras algo como esto. Note los atributos:

• necesario
• tipo = correo electrónico
• enfoque automático
• patrón

<input type="email" value="" name="EMAIL" id="EMAIL" placeholder="[email protected]" autofocus required pattern="[^ @]*@[^ @]*" />

Answer 11

<input type="email" name="email" id="email" value="" placeholder="Email" required />

documentación http://www.w3.org/TR/html-markup/input.email.html

Answer 12

^(http:////www/.|https:////www/.|http:////|https:////)[a-z0-9]+([/-/.]{1}[a-z0-9]+)*/.[a-z]{2,5}(:[0-9]{1,5})?(//.*)?$

Answer 13

^[/w]{1,}[/w.+-]{0,}@[/w-]{2,}([.][a-zA-Z]{2,}|[.][/w-]{2,}[.][a-zA-Z]{2,})$

Esta es una versión modificada de la solución anterior que también acepta mayúsculas.

Answer 14

pattern="[a-z0-9._%+-]{1,40}[@]{1}[a-z]{1,10}[.]{1}[a-z]{3}"

<input type="email"  class="form-control" id="driver_email" placeholder="Enter Driver Email" name="driver_email" pattern="[a-z0-9._%+-]{1,40}[@]{1}[a-z]{1,10}[.]{1}[a-z]{3}" required="">