¿Cómo se puede usar JQuery para validar direcciones de correo electrónico?

8 minutos de lectura

Avatar de usuario de DuH
DuH

¿Cómo se puede usar JQuery para validar direcciones de correo electrónico?

  • Antes de intentar “validar” una dirección de correo electrónico, deberías leer esto: hackernoon.com/…

    –Mikko Rantalainen

    29 de mayo de 2018 a las 11:26

Avatar de usuario de Manish Shrivastava
Manish Shrivastava

Función jQuery para validar el 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 a usar esto

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

  • Deberías regresar emailReg.test($email);

    – nffdiogosilva

    13 de noviembre de 2013 a las 14:02

  • Solo para su información, esto devuelve verdadero para una dirección de correo electrónico en blanco. p.ej emailReg.text("") true. Simplemente bajaría la función a la declaración de emailReg var y luego esto: return ( $email.length > 0 && emailReg.test($email))

    – Diziet

    9 de enero de 2014 a las 16:06


  • 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 .museo, por lo que le gustaría cambiar var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; a var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/;

    – Teo

    21 de febrero de 2014 a las 8:31


  • cierto eres @h.coates! Vine a este hilo con la esperanza de encontrar que jQuery en realidad tenía una validación de correo electrónico incorporada. Muévete, estos no son los droides que estás buscando…

    – iGanja

    04/04/2014 a las 22:16

  • 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

    24 de junio de 2015 a las 12:24


  • El último sigue vivo)

    – Andrew Bastannik

    14/04/2014 a las 14:55

  • pero el formato aceptado es x@x (eso es raro) debe x@x.x ¿Cómo puedo arreglar eso?

    – Basheer AL-MOMANI

    24 de noviembre de 2016 a las 12:57


  • @BasheerAL-MOMANI [jqueryvalidation.org/jQuery.validator.methods/] $.validator.methods.email = function( value, element ) { return this.optional( element ) || //^.+@.+\..+$/.test( value ); }

    –Bill Gillingham

    23 de diciembre de 2016 a las 7:18


usaría el Complemento de validación de jQuery por algunas razones.

Has validado, ok genial, ¿ahora qué? Necesita mostrar el error, manejar borrarlo cuando sea válido, mostrar cuántos errores en total quizás? Puede manejar muchas cosas 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.

  • 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 necesitas es una rueda nueva 🙂

    – kraftb

    25 de febrero de 2014 a las 15:49

  • @kraftb Como se indica 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

    25 de febrero de 2014 a las 16:01

  • Gracias por esto @NickCraver: Esto realmente parece ser un enfoque de “mejores prácticas” para el problema de manejar la validación de un correo electrónico. Esto ciertamente NO es como construir una fábrica (escribir las bibliotecas 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 auto, colocar la rueda, colocar 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 de método.

    – jfgrissom

    30/07/2014 a las 18:30


  • ¡Ahora estás reinventando la metáfora de ‘reinventar la rueda’!

    – Dom Vinyard

    10 de agosto de 2015 a las 9:48


  • Para personas atrapadas trabajando en aplicaciones de formularios web encosia.com/using-jquery-validation-with-asp-net-webforms

    – Jerrek

    29 de enero de 2016 a las 0:41

avatar de usuario de user1993920
usuario1993920

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

  • 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 necesitas es una rueda nueva 🙂

    – kraftb

    25 de febrero de 2014 a las 15:49

  • @kraftb Como se indica 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

    25 de febrero de 2014 a las 16:01

  • Gracias por esto @NickCraver: Esto realmente parece ser un enfoque de “mejores prácticas” para el problema de manejar la validación de un correo electrónico. Esto ciertamente NO es como construir una fábrica (escribir las bibliotecas 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 auto, colocar la rueda, colocar 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 de método.

    – jfgrissom

    30/07/2014 a las 18:30


  • ¡Ahora estás reinventando la metáfora de ‘reinventar la rueda’!

    – Dom Vinyard

    10 de agosto de 2015 a las 9:48


  • Para personas atrapadas trabajando en aplicaciones de formularios web encosia.com/using-jquery-validation-with-asp-net-webforms

    – Jerrek

    29 de enero de 2016 a las 0:41

Avatar de usuario de SwatiKothari
SwatiKothari

<!-- Dont forget to include the jQuery library here -->
<script type="text/javascript" src="https://stackoverflow.com/questions/2507030/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

¿Ha sido útil esta solución?