Validación de direcciones de correo electrónico usando jQuery y regex

174

No estoy muy seguro de cómo hacer esto. Necesito validar las direcciones de correo electrónico usando regex con algo como esto:

[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)

Entonces necesito ejecutar esto en una función jQuery como esta:

$j("#fld_emailaddress").live('change',function() { 
var emailaddress = $j("#fld_emailaddress").val();

// validation here? 

if(emailaddress){}

// end validation

$j.ajax({  
        type: "POST",  
         url: "../ff-admin/ff-register/ff-user-check.php",  
        data: "fld_emailaddress="+ emailaddress,  
        success: function(msg)
        { 
            if(msg == 'OK') { 
            $j("#fld_username").attr('disabled',false); 
            $j("#fld_password").attr('disabled',false); 
            $j("#cmd_register_submit").attr('disabled',false); 
            $j("#fld_emailaddress").removeClass('object_error'); // if necessary
            $j("#fld_emailaddress").addClass("object_ok");
            $j('#email_ac').html('&nbsp;<img src="img/cool.png" align="absmiddle"> <font color="Green"> Your email <strong>'+ emailaddress+'</strong> is OK.</font>  ');
            } else {  
            $j("#fld_username").attr('disabled',true); 
            $j("#fld_password").attr('disabled',true); 
            $j("#cmd_register_submit").attr('disabled',true);  
            $j("#fld_emailaddress").removeClass('object_ok'); // if necessary
            $j("#fld_emailaddress").addClass("object_error");
            $j('#email_ac').html(msg);
            }
        }
     });
});

¿A dónde va la validación y cuál es la expresión?

RussP
fuente

Respuestas:

491

ACTUALIZACIONES


function isValidEmailAddress(emailAddress) {
    var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
    return pattern.test(emailAddress);
}

if( !isValidEmailAddress( emailaddress ) ) { /* do stuff here */ }
Luca Filosofi
fuente
2
gracias Aseptik aparte de "perdido" la dirección de direccióndecorreo funciona bien si sabe que no existe una expresión regular 100%, pero puede ser "bastante" cerca
RussP
1
no lo validó demasiado, pero ya me dio un falso positivo para [email protected]
gcb
@ gcb: hola, si la expresión regular no satisfizo tus necesidades, puedes cambiarla, de todos modos lo he probado y funciona bien. jsfiddle.net/ADPaM
Luca Filosofi
14
una expresión regular sola en el lado del cliente, no sabe si hay un servidor de correo ni si el dominio en sí existe. Merly comprueba si la sintaxis de cualquier correo electrónico es válida o no. Es solo para ayudar al usuario a escribir la dirección correcta. No es una validación.
BerggreenDK
Funciona perfecto! Gracias amigo
28

Esta es mi solución:

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
    // alert( pattern.test(emailAddress) );
    return pattern.test(emailAddress);
};

Encontré que RegExp por aquí: http://mdskinner.com/code/email-regex-and-validation-jquery

Bjørn Børresen
fuente
3
su punto sobre el signo más es válido, pero su expresión regular es menos mejor que la que estoy usando en mi ejemplo. ps: he actualizado mi expresión regular para admitir el signo más.
Luca Filosofi
La mayoría de las veces solo desea validar que el usuario ingresó el correo electrónico en el formato correcto. Para identificar errores tipográficos como "2" en lugar de "@". Así que me gusta más que la respuesta original, pero la respuesta de aSeptik es exhaustiva y también voté a favor.
darwindeeds
test @ gmail..com dice vaild - WRONG, change regular expression
htngapi
14
$(document).ready(function() {

$('#emailid').focusout(function(){

                $('#emailid').filter(function(){
                   var emil=$('#emailid').val();
              var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            if( !emailReg.test( emil ) ) {
                alert('Please enter valid email');
                } else {
                alert('Thank you for your valid email');
                }
                })
            });
});
webizon
fuente
8
En realidad esto fue útil. El título dice JQuery y esta es la única respuesta hasta ahora que tiene un ejemplo decente de jquery.
Taylor Mitchell
esto valida abc.b. @ yahoo.com
NoBullMan
7

Lolz esto es mucho mejor

    function isValidEmailAddress(emailAddress) {
        var pattern = new RegExp(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/);
        return pattern.test(emailAddress);
    };
Code Spy
fuente
Prefiero su solución para sitios web móviles. El otro haría que mi teléfono inteligente se derritiera;) +1
Hexodus
problema de sintaxis en JavaScript
Sajith
¡No validará letras äüõ, etc.!
DAH
5

Le recomendaría que use el complemento jQuery para Verimail.js .

¿Por qué?

  • IANA TLD validation
  • Validación de sintaxis (según RFC 822)
  • Sugerencia de ortografía para los TLD y dominios de correo electrónico más comunes
  • Denegar dominios temporales de cuentas de correo electrónico como mailinator.com

¿Cómo?

Incluya verimail.jquery.js en su sitio y use la función:

$("input#email-address").verimail({
    messageElement: "p#status-message"
});

Si tiene un formulario y desea validar el correo electrónico al enviar, puede usar la función getVerimailStatus:

if($("input#email-address").getVerimailStatus() < 0){
    // Invalid email
}else{
    // Valid email
}
Robin Orheden
fuente
1
Verimail sigue validando en keyup, lo que significa que, tan pronto como comience a escribir, recibirá un mensaje de error. En general, es un complemento excelente, pero este es un factor decisivo: preferiría validar solo cuando se active manualmente, es decir, antes de hacer clic en el botón Enviar o abandonar el campo.
Sebastian Schmid
0

También podemos usar la expresión regular (/^([\w.-font>+)@([\w-font>+)((.(\w){2,3})+)$/i) para validar la dirección de correo electrónico El formato es correcto o no.

var emailRegex = new RegExp(/^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$/i);
 var valid = emailRegex.test(emailAddress);
  if (!valid) {
    alert("Invalid e-mail address");
    return false;
  } else
    return true;
Avinash
fuente
0

Prueba esto

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/);
    return pattern.test(emailAddress);
};
Purvik Dhorajiya
fuente
0

puedes usar esta función

 var validateEmail = function (email) {

        var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;


        if (pattern.test(email)) {
            return true;
        }
        else {
            return false;
        }
    };
Nikki
fuente