Validar campos tipo email con jQuery

Validar campos tipo email con jQuery

En una serie de tutoriales hemos visto como validar campos de texto, selectcheckbox y radiobuttons utilizando la librería jQuery. En esta oportunidad estaremos viendo como validar campos tipo email para que contengan una dirección de correo electrónico correcta.

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

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

$('#validar').click(function() {
    // Expresion regular para validar el correo
    var regex = /[\w-\.]{2,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/;

    // Se utiliza la funcion test() nativa de JavaScript
    if (regex.test($('#email').val().trim())) {
        alert('Correo validado');
    } else {
        alert('La direcc贸n de correo no es valida');
    }
});

La función jQuery necesaria posee una variable llamada regex en donde se encuentra la expresión regular que nos permitirá hacer la comparación contra lo que ingreso el usuario en el campo.

Se utiliza la función test() nativa de JavaScript la 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 encuntra.

Eso es todo por este tutorial y espero les haya resultado de utilidad y lo compartan para que pueda llegar a más personas.

Comentarios

Deja tu comentario

http://