Validación de correo electrónico usando jQuery

356

Soy nuevo en jQuery y me preguntaba cómo usarlo para validar las direcciones de correo electrónico.

DuH
fuente
Antes de intentar "validar" una dirección de correo electrónico, debería leer esto: hackernoon.com/…
Mikko Rantalainen

Respuestas:

703

Puede usar JavaScript antiguo normal para eso:

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}
Fabian
fuente
66
Sí, recuerde que jQuery sigue siendo javascript :)
Fabian
36
Aunque esta expresión regular considera válidas la mayoría de las direcciones del mundo real, todavía tiene muchos falsos positivos y falsos negativos. Por ejemplo, vea ejemplos de direcciones de correo electrónico válidas e inválidas en Wikipedia.
Arseny
1
@Umingo [email protected] sigue siendo un correo electrónico válido, sin embargo, aún podría escribirse de mejor manera. Ninguna parte del dominio puede comenzar con otro carácter que no sea [a-z0-9] (no distingue entre mayúsculas y minúsculas). Además, el correo electrónico válido (y el dominio) tiene algún límite de len, que tampoco se ha probado.
tomis
10
Con los nuevos dominios de nivel superior cada vez más común esta expresión regular puede ser necesario modificar .systems y .poker etc son válidos todos los TLD ahora, pero fallarían la comprobación de expresiones regulares
Liath
3
Según el comentario de Theo sobre otra respuesta, debe cambiar var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;a var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,6})+$/;para admitir los nuevos TLD como .museum, etc.
Ira Herman
165

Función jQuery para validar correo electrónico

Realmente no me gusta usar complementos, especialmente cuando mi formulario solo tiene un campo que necesita ser validado. Uso esta función y la llamo cada vez que necesito validar un campo de formulario de correo electrónico.

 function validateEmail($email) {
  var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
  return emailReg.test( $email );
}

y ahora para usar esto

if( !validateEmail(emailaddress)) { /* do stuff here */ }

¡Salud!

Shrivastava Manish
fuente
16
Deberías regresaremailReg.test($email);
nffdiogosilva
77
Solo para su información, esto se cumple para una dirección de correo electrónico en blanco. por ej emailReg.text("") true. Simplemente la función hasta la declaración del emailReg var luego esto:return ( $email.length > 0 && emailReg.test($email))
Diziet
14
La expresión regular para verificar la validez de la dirección de correo electrónico está desactualizada ya que ahora tenemos extensiones de nombre de dominio con 6 caracteres como .museum, por lo que querrá cambiar var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;avar emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/;
Theo
3
derecho eres @ h.coates! Llegué a este hilo con la esperanza de encontrar que jQuery realmente tenía una validación de correo electrónico integrada. Avanza, estos no son los droides que estás buscando ...
iGanja
3
El punto de @ Theo es vital, pero la longitud real del TLD debe ser superior a 6, el límite superior teórico para la extensión es de 63 caracteres. actualmente el más largo tiene más de 20 ver data.iana.org/TLD/tlds-alpha-by-domain.txt
Jeroenv3
41

Me gustaría utilizar el plug-in de validación de jQuery por varias razones.

Validaste, ok genial, ¿y ahora qué? Necesita mostrar el error, manejar borrarlo cuando sea válido, ¿mostrando cuántos errores en total tal vez? Hay muchas cosas que puede manejar por usted, no es necesario reinventar la rueda.

Además, otro gran beneficio es que está alojado en un CDN, la versión actual en el momento de esta respuesta se puede encontrar aquí: http://www.asp.net/ajaxLibrary/CDNjQueryValidate16.ashx Esto significa tiempos de carga más rápidos para el cliente.

Nick Craver
fuente
66
Ok ... no hay necesidad de reinventar la rueda. Pero, ¿por qué tengo que instalar docenas de KByte de Javascript para validar un campo? Es como construir una fábrica de automóviles si todo lo que necesita es una rueda nueva :)
kraftb
3
@kraftb Como dije en mi respuesta, es el manejo y la visualización de la validación, no solo la validación del texto en sí.
Nick Craver
55
Gracias por este @NickCraver: Esto realmente parece ser un enfoque de "mejor práctica" para el problema de manejar la validación de un correo electrónico. Esto ciertamente no es como construir una fábrica (escribir las librerías para hacer todo el trabajo) para obtener una rueda. Es como seguir las instrucciones de fábrica para instalar la rueda en un vehículo moderno (levantar el automóvil, colocar la rueda, poner las tuercas) en lugar de tratar de descubrir cómo colocar una rueda de carreta en su automóvil. Este complemento es súper simple de usar. Para hacer la validación del formulario, es literalmente una inclusión, algunas anotaciones y una sola llamada a un método.
jfgrissom
3
¡Ahora estás reinventando la metáfora de 'reinventar la rueda'!
Dom Vinyard
Para personas atrapadas trabajando en aplicaciones de formularios
web
38

Mire http: //bassistance.de/jquery-plugins/jquery-plugin-validation/ . Es un buen complemento jQuery, que permite construir un poderoso sistema de validación para formularios. Hay algunas muestras útiles aquí . Entonces, la validación del campo de correo electrónico en el formulario se verá así:

$("#myform").validate({
  rules: {
    field: {
      required: true,
      email: true
    }
  }
});

Consulte la documentación del método de correo electrónico para obtener detalles y muestras.

Andrew Bashtannik
fuente
1
El último sigue vivo)
Andrew Bashtannik
66
pero el formato aceptado es x@x(eso es extraño) debe [email protected]¿Cómo puedo solucionarlo?
Basheer AL-MOMANI
2
@ BasheerAL-MOMANI [ jqueryvalidation.org/jQuery.validator.methods/] $.validator.methods.email = function( value, element ) { return this.optional( element ) || //^.+@.+\..+$/.test( value ); }
Bill Gillingham el
17
<script type="text/javascript">
    $(document).ready(function() {
      $('.form_error').hide();
      $('#submit').click(function(){
           var name = $('#name').val();
           var email = $('#email').val();
           var phone = $('#phone').val();
           var message = $('#message').val();
           if(name== ''){
              $('#name').next().show();
              return false;
            }
            if(email== ''){
               $('#email').next().show();
               return false;
            }
            if(IsEmail(email)==false){
                $('#invalid_email').show();
                return false;
            }

            if(phone== ''){
                $('#phone').next().show();
                return false;
            }
            if(message== ''){
                $('#message').next().show();
                return false;
            }
            //ajax call php page
            $.post("send.php", $("#contactform").serialize(),  function(response) {
            $('#contactform').fadeOut('slow',function(){
                $('#success').html(response);
                $('#success').fadeIn('slow');
               });
             });
             return false;
          });
      });
      function IsEmail(email) {
        var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if(!regex.test(email)) {
           return false;
        }else{
           return true;
        }
      }
  </script>

<form action="" method="post" id="contactform">
                            <table class="contact-table">
                              <tr>
                                <td><label for="name">Name :</label></td>
                                <td class="name"> <input name="name" id="name" type="text" placeholder="Please enter your name" class="contact-input"><span class="form_error">Please enter your name</span></td>
                              </tr>
                              <tr>
                                <td><label for="email">Email :</label></td>
                                <td class="email"><input name="email" id="email" type="text" placeholder="Please enter your email" class="contact-input"><span class="form_error">Please enter your email</span>
                                  <span class="form_error" id="invalid_email">This email is not valid</span></td>
                              </tr>
                              <tr>
                                <td><label for="phone">Phone :</label></td>
                                <td class="phone"><input name="phone" id="phone" type="text" placeholder="Please enter your phone" class="contact-input"><span class="form_error">Please enter your phone</span></td>
                              </tr>
                              <tr>
                                <td><label for="message">Message :</label></td>
                                <td class="message"><textarea name="message" id="message" class="contact-input"></textarea><span class="form_error">Please enter your message</span></td>
                              </tr>
                              <tr>
                                <td></td>
                                <td>
                                  <input type="submit" class="contactform-buttons" id="submit"value="Send" />
                                  <input type="reset" class="contactform-buttons" id="" value="Clear" />
                                </td>
                              </tr>
                            </table>
     </form>
     <div id="success" style="color:red;"></div>
usuario1993920
fuente
15

<!-- Dont forget to include the jQuery library here -->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    $("#validate").keyup(function(){

        var email = $("#validate").val();

        if(email != 0)
        {
            if(isValidEmailAddress(email))
            {
                $("#validEmail").css({
                    "background-image": "url('validYes.png')"
                });
            } else {
                $("#validEmail").css({
                    "background-image": "url('validNo.png')"
                });
            }
        } else {
            $("#validEmail").css({
                "background-image": "none"
            });         
        }

    });

});

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
    return pattern.test(emailAddress);
}

</script>

<style>
    #validEmail
    {
        margin-top: 4px;
        margin-left: 9px;
        position: absolute;
        width: 16px;
        height: 16px;
    }

    .text
    {
        font-family: Arial, Tahoma, Helvetica;
    }
</style>

    <title>Live Email Validation with jQuery Demo</title>
</head>
<body>
    <div class="text"><h1>Reynoldsftw.com - Live Email Validation</h1><h2>Type in an email address in the box below:</h2></div>
    <div><input type="text" id="validate" width="30"><span id="validEmail"></span></div>
    <div class="text"><P>More script and css style

: www.htmldrive.net


Fuente: htmldrive.com

SwatiKothari
fuente
14

Recomendaría Verimail.js , también tiene un complemento JQuery .

¿Por qué? Verimail admite lo siguiente:

  • Validación de sintaxis (según RFC 822)
  • IANA TLD validation
  • 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

Entonces, además de la validación, Verimail.js también le ofrece sugerencias. Entonces, si escribe un correo electrónico con el TLD o dominio incorrecto que es muy similar a un dominio de correo electrónico común (hotmail.com, gmail.com, etc.), puede detectar esto y sugerir una corrección.

Ejemplos:

Y así..

Para usarlo con jQuery, solo incluya verimail.jquery.js en su sitio y ejecute la siguiente función:

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

El elemento de mensaje es un elemento en el que se mostrará un mensaje. Esto puede ser todo, desde "Su correo electrónico no es válido" hasta "¿Quiso decir ...?".

Si tiene un formulario y desea restringirlo para que no se pueda enviar a menos que el correo electrónico sea válido, puede verificar el estado utilizando la función getVerimailStatus como se muestra a continuación:

if($("input#email-address").getVerimailStatus() < 0){
    // Invalid
}else{
    // Valid
}

Esta función devuelve un código de estado entero de acuerdo con el objeto Comfirm.AlphaMail.Verimail.Status. Pero la regla general es que los códigos por debajo de 0 son códigos que indican errores.

Robin Orheden
fuente
.getVerimailStatus()no devuelve códigos de estado numéricos, solo un valor de cadena de success, erroro posiblemente pending(no verificó el último).
Niko Nyman
14

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 (email is invalid) */ }

esto fue proporcionado por el usuario Luca Filosofi en esta respuesta esta respuesta

Amila kumara
fuente
Si usa esto en la página ASP.NET MVC Razor, no olvide escapar del @personaje con otro @personaje. Así @@, de lo contrario, obtendrá un error de compilación.
Rosdi Kasim
11

Una solución muy simple es usar la validación html5:

<form>
  <input type="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}">

  <input type="submit">
</form>

http://jsfiddle.net/du676/56/

iamse7en
fuente
10

Esto realiza una validación más exhaustiva, por ejemplo, comprueba los puntos sucesivos en el nombre de usuario, como john..doe @ example.com

function isValidEmail(email)
{
    return /^[a-z0-9]+([-._][a-z0-9]+)*@([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,4}$/.test(email)
        && /^(?=.{1,64}@.{4,64}$)(?=.{6,100}$).*/.test(email);
}

Vea validar la dirección de correo electrónico utilizando expresiones regulares en JavaScript .

Friki
fuente
1
¿Pero los puntos sucesivos son realmente inválidos? Por el contrario, creo que estaría excluyendo direcciones de correo electrónico válidas al hacerlo.
icktoofay
9

Como otros han mencionado, puede usar una expresión regular para verificar si la dirección de correo electrónico coincide con un patrón. Pero aún puede tener correos electrónicos que coincidan con el patrón, pero todavía puedo rebotar o ser correos electrónicos falsos de spam.

comprobando con una expresión regular

var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);

verificar con una API de validación de correo electrónico real

Puede usar una API que verificará si la dirección de correo electrónico es real y actualmente activa.

var emailAddress = "[email protected]"
response = $.get("https://isitarealemail.com/api/email/validate?email=" +
    emailAddress,
    function responseHandler(data) {
        if (data.status === 'valid') {
            // the email is valid and the mail box is active
        } else {
            // the email is incorrect or unable to be tested.
        }
    })

Para obtener más información, visite https://isitarealemail.com o una publicación de blog

Stephen
fuente
8

Si tiene un formulario básico, simplemente ingrese el tipo de correo electrónico de entrada: <input type="email" required>

Esto funcionará para los navegadores que usan atributos HTML5 y luego ni siquiera necesita JS. Solo usando la validación de correo electrónico, incluso con algunos de los scripts anteriores, no servirá de mucho ya que:

[email protected] [email protected] [email protected]

etc ... Todos se validarán como correos electrónicos "reales". Por lo tanto, sería mejor asegurarse de que el usuario tenga que ingresar su dirección de correo electrónico dos veces para asegurarse de que ingrese la misma. Pero garantizar que la dirección de correo electrónico sea real sería muy difícil pero muy interesante ver si había un camino. Pero si solo se está asegurando de que sea un correo electrónico, manténgase en la entrada HTML5.

Ejemplo de violín

Esto funciona en Firefox y Chrome. Puede que no funcione en Internet Explorer ... Pero Internet Explorer es una mierda. Entonces está eso ...

isaac climas
fuente
El método regexp generalmente evita correos electrónicos claramente tontos como un @ bc (que su ejemplo JSFiddle vinculado permite usar el último Chrome), por lo que la solución HTML5 es claramente una solución inadecuada.
SnowInferno
frio. Entonces, ¿qué tal si simplemente se "usa" la coincidencia de patrones como HTML5? ¿Por qué no intentas esto en tu Chromebook? Jsfiddle.net/du676/8
isaac weathers
8

Validación de correo electrónico Javascript en MVC / ASP.NET

El problema que encontré al usar la respuesta de Fabian es implementarlo en una vista MVC debido al @símbolo de Razor . Tienes que incluir un @símbolo adicional para escapar, así:@@

Para evitar la maquinilla de afeitar en MVC

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}

No lo vi en ninguna otra parte de esta página, así que pensé que podría ser útil.

EDITAR

Aquí hay un enlace de Microsoft que describe su uso.
Acabo de probar el código anterior y obtuve el siguiente js:

function validateEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
  return regex.test(email);
}

Que está haciendo exactamente lo que se supone que debe hacer.

Trevor Nestman
fuente
@nbrogi ¿Qué quieres decir con que esto no funciona? Acabo de comprobar esto de nuevo y esto produce el siguiente js var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; ¿Qué está pasando con su código?
Trevor Nestman
Lo siento, no estoy seguro en este momento, lo cambié por completo.
nkkollaw
Por favor avísame cuando puedas. Si esta es mala información, la eliminaré. Intento contribuir con información útil cuando sea posible y esto me ayudó al escribir una expresión regular en una vista MVC.
Trevor Nestman
Una vez más, me gustaría saber por qué esto fue rechazado. Hace exactamente lo que quiero, que es producir el @símbolo en una expresión regular .cshtml. Normalmente, trataría de tratar todo después del @símbolo como código de afeitar, pero el doble lo @@impide.
Trevor Nestman
El problema principal que veo es en el segundo bloque de código, su expresión regular está configurada en una variable llamada expresión regular, pero la segunda línea usa una variable llamada re
phlare
7
function isValidEmail(emailText) {
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\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]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([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(emailText);
};

Usar así:

if( !isValidEmail(myEmail) ) { /* do things if myEmail is valid. */ }
JayKandari
fuente
6
function validateEmail(emailaddress){  
   var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;  
   if(!emailReg.test(emailaddress)) {  
        alert("Please enter valid email id");
   }       
}
PINCHAZO
fuente
5
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type = "text/javascript">
    function ValidateEmail(email) {
        var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
        return expr.test(email);
    };
    $("#btnValidate").live("click", function () {
        if (!ValidateEmail($("#txtEmail").val())) {
            alert("Invalid email address.");
        }
        else {
            alert("Valid email address.");
        }
    });
</script>
<input type = "text" id = "txtEmail" />
<input type = "button" id = "btnValidate" value = "Validate" />
Pritam
fuente
4

Aterrizó aquí ..... terminó aquí: https://html.spec.whatwg.org/multipage/forms.html#valid-e-mail-address

... que proporcionó la siguiente expresión regular:

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

... que encontré gracias a una nota en el archivo léame del plugin jQuery Validation: https://github.com/jzaefferer/jquery-validation/blob/master/README.md#reporting-an-issue

Por lo tanto, la versión actualizada de @Fabian 's respuesta sería:

function IsEmail(email) {
  var regex = /^[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])?)*$/;
  return regex.test(email);
}

Espero que ayude

timborden
fuente
Esta fue la mejor respuesta para mí: volvió a ser cierto [email protected]pero me gustaría que fuera falso
Adam Knights
3

utilizar este

if ($this.hasClass('tb-email')) {
    var email = $this.val();
    var txt = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if (!txt.test(email)) {
        e.preventDefault();
        $this.addClass('error');
    } else {
        $this.removeClass('error');
    }
}
Ankit Agrawal
fuente
3

El error está en Jquery Validation Validation Plugin Solo se valida con @ para cambiar esto

cambia el código a esto

email: function( value, element ) {
    // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
    // Retrieved 2014-01-14
    // If you have a problem with this implementation, report a bug against the above spec
    // Or use custom methods to implement your own email validation
    return this.optional( element ) || /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test( value );
}
usuario4974898
fuente
3

Para aquellos que desean usar una mejor solución mantenible que las partidas disruptivas RegEx de un año de duración, escribí algunas líneas de código. Los que quieran guardar bytes, se adhieren a la variante RegEx :)

Esto restringe:

  • No @ en cadena
  • Sin punto en la cuerda
  • Más de 2 puntos después de @
  • Caracteres incorrectos en el nombre de usuario (antes de @)
  • Más de 2 @ en cadena
  • Caracteres malos en el dominio
  • Caracteres malos en el subdominio
  • Malos caracteres en TLD
  • TLD - direcciones

De todos modos, todavía es posible filtrarse, así que asegúrese de combinar esto con una validación del lado del servidor + verificación de enlace de correo electrónico.

Aquí está el JSFiddle

 //validate email

var emailInput = $("#email").val(),
    emailParts = emailInput.split('@'),
    text = 'Enter a valid e-mail address!';

//at least one @, catches error
if (emailParts[1] == null || emailParts[1] == "" || emailParts[1] == undefined) { 

    yourErrorFunc(text);

} else {

    //split domain, subdomain and tld if existent
    var emailDomainParts = emailParts[1].split('.');

    //at least one . (dot), catches error
    if (emailDomainParts[1] == null || emailDomainParts[1] == "" || emailDomainParts[1] == undefined) { 

        yourErrorFunc(text); 

     } else {

        //more than 2 . (dots) in emailParts[1]
        if (!emailDomainParts[3] == null || !emailDomainParts[3] == "" || !emailDomainParts[3] == undefined) { 

            yourErrorFunc(text); 

        } else {

            //email user
            if (/[^a-z0-9!#$%&'*+-/=?^_`{|}~]/i.test(emailParts[0])) {

               yourErrorFunc(text);

            } else {

                //double @
                if (!emailParts[2] == null || !emailParts[2] == "" || !emailParts[2] == undefined) { 

                        yourErrorFunc(text); 

                } else {

                     //domain
                     if (/[^a-z0-9-]/i.test(emailDomainParts[0])) {

                         yourErrorFunc(text); 

                     } else {

                         //check for subdomain
                         if (emailDomainParts[2] == null || emailDomainParts[2] == "" || emailDomainParts[2] == undefined) { 

                             //TLD
                             if (/[^a-z]/i.test(emailDomainParts[1])) {

                                 yourErrorFunc(text);

                              } else {

                                 yourPassedFunc(); 

                              }

                        } else {

                             //subdomain
                             if (/[^a-z0-9-]/i.test(emailDomainParts[1])) {

                                 yourErrorFunc(text); 

                             } else {

                                  //TLD
                                  if (/[^a-z]/i.test(emailDomainParts[2])) {

                                      yourErrorFunc(text); 

                                  } else {

                                      yourPassedFunc();
}}}}}}}}}
SEsterbauer
fuente
3

Puede usar jQuery Validation y, en una sola línea HTML, puede validar el correo electrónico y el mensaje de validación de correo electrónico:type="email" required data-msg-email="Enter a valid email account!"

Puede usar el parámetro data-msg-email para colocar un mensaje personalizado o de lo contrario no coloque este parámetro y se mostrará el mensaje predeterminado: "Ingrese una dirección de correo electrónico válida".

Ejemplo completo:

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required data-msg-email="Enter a valid email account!">
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>
<script>
$("#commentForm").validate();
</script>
JC Gras
fuente
2
if($("input#email-address").getVerimailStatus() < 0) { 

(incorrect code)

}

if($("input#email-address").getVerimailStatus() == 'error') { 

(right code)

}
Lorenzo
fuente
99
¿Puede elaborar su respuesta ... por ejemplo, debe mencionar que getVerimailStatus es un complemento adicional.
Dave Hogan
2
checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\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]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([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, "eg. [email protected]" );

Referencia: SITIO WEB JQUERY UI

Daniel Adenew
fuente
2

debería ver esto: jquery.validate.js , agréguelo a su proyecto

usándolo así:

<input id='email' name='email' class='required email'/>
Chuanshi Liu
fuente
2

Otra opción simple y completa:

<input type="text" id="Email"/>
<div id="ClasSpan"></div>   
<input id="ValidMail" type="submit"  value="Valid"/>  


function IsEmail(email) {
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test(email);
}

$("#ValidMail").click(function () {
    $('span', '#ClasSpan').empty().remove();
    if (IsEmail($("#Email").val())) {
        //aqui mi sentencia        
    }
    else {
        $('#ClasSpan').append('<span>Please enter a valid email</span>');
        $('#Email').keypress(function () {
            $('span', '#itemspan').empty().remove();
        });
    }
});
jorcado
fuente
3
Stack Overflow es un sitio en inglés. No publique contenido en otros idiomas.
Anders
2

Puedes crear tu propia función

function emailValidate(email){
    var check = "" + email;
    if((check.search('@')>=0)&&(check.search(/\./)>=0))
        if(check.search('@')<check.split('@')[1].search(/\./)+check.search('@')) return true;
        else return false;
    else return false;
}

alert(emailValidate('[email protected]'));
Wahid Masud
fuente
1

Una simplificada que acabo de hacer, hace lo que necesito. Lo han limitado a solo alfanumérico, punto, guión bajo y @.

<input onKeyUp="testEmailChars(this);"><span id="a"></span>
function testEmailChars(el){
    var email = $(el).val();
    if ( /^[[email protected]]+$/.test(email)==true ){
        $("#a").html("valid");
    } else {
        $("#a").html("not valid");
    }
}

Hecho con ayuda de otros

Nathan
fuente
1

Esta expresión regular evita nombres de dominio duplicados como [email protected], solo permitirá el dominio dos veces como [email protected]. Tampoco permite la introducción desde un número como [email protected]

 regexp: /^([a-zA-Z])+([a-zA-Z0-9_.+-])+\@(([a-zA-Z])+\.+?(com|co|in|org|net|edu|info|gov|vekomy))\.?(com|co|in|org|net|edu|info|gov)?$/, 

Todo lo mejor !!!!!

Brijeshkumar
fuente
1

Valide el correo electrónico mientras escribe, con el manejo del estado del botón.

$("#email").on("input", function(){
    var email = $("#email").val();
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    if (!filter.test(email)) {
      $(".invalid-email:empty").append("Invalid Email Address");
      $("#submit").attr("disabled", true);
    } else {
      $("#submit").attr("disabled", false);
      $(".invalid-email").empty();
    }
  });
Radovan Skendzic
fuente
1

si está utilizando la validación jquery

Creé un método emailCustomFormatque utilicé regexpara mi formato custm, puede cambiarlo para cumplir con sus requisitos

jQuery.validator.addMethod("emailCustomFormat", function (value, element) {
        return this.optional(element) || /^([\w-\.]+@@([\w-]+\.)+[\w-]{2,4})?$/.test(value);
    }, abp.localization.localize("FormValidationMessageEmail"));// localized message based on current language

entonces puedes usarlo así

$("#myform").validate({
  rules: {
    field: {
      required: true,
      emailCustomFormat : true
    }
  }
});

esta expresión regular acepta

[email protected], [email protected] Pero no este

abc@abc` [email protected]`[email protected]

Espero que esto te ayude

Basheer AL-MOMANI
fuente