Validar campos email con jQuery

Validar campos email con jQuery
  • Eborio Linárez
  • October 17, 2013
  • 0

En este tutorial hemos visto como validar campos de texto, select, checkbox y radiobutton utilizando la librería jQuery. Y ahora para finalizar el tutorial validaremos campos email para garantizar que contengan una dirección de correo electrónica correcta.

Para llevar a cabo la validación partiremos del siguiente código HTML el cual simplemente posee un campo que mostraremos al usuario.

<label for="email">Correo electrónico</label>
<input type="email" name="email" id="email">

Nótese que estoy utilizando un campo de tipo email perteneciente a HTML5, lo cual no es obligatorio y se pueden utilizar campos de texto comunes.

Ahora veamos el código jQuery necesario para comprobar la dirección de correo ingresada en el campo.

$('#validate').click(function() {

    var regex = /[w-.]{2,}@([w-]{2,}.)*([w-]{2,}.)[w-]{2,4}/;

    if (regex.test($('#email').val().trim())) {
        alert('Correo validado');

    } else {
        alert('La direccón de correo no es válida');
    }
});

En primer lugar creamos una variable llamada regex que almacena una expresión regular que utilizaremos para compararla contra el valor ingresado por el usuario en el campo email.

Se utiliza el método test() nativo de JavaScript el  cual compara el texto ingresado por el usuario contra la expresión regular definida. Dicha función retorna true si encuentra coincidencias y retorna false si no las encuentra.

Probemos ahora el funcionamiento del código.

See the Pen Validar campos email con jQuery by Eborio Linárez (@eborio) on CodePen.

Con esto finalizamos esta serie de posts que conforman el tutorial. Espero cada uno de ellos les haya resultado de utilidad, le saquen provecho y los compartan en sus redes sociales.

 

Comparte en las redes sociales

Comentarios

Aún no hay comentarios. Sé el primero en comentar.

Deja un comentario