Que tal amigos lectores, el siguiente #codertip muestra como validar email en un formulario, utilizaremos JavaScript para crear una función que nos permita verificar que el valor de correo electrónico introducido por un usuario cumpla con el formato correcto mediante el uso de expresiones regulares y el campo email de HTML5, espero que este pequeño tip sea de ayuda y que lo puedan implementar en algún otro proyecto.
Campo tipo email
A partir de la versión 5 de HTML se introdujo el campo tipo email y al usar este tipo de campo le indicamos al navegador que el valor esperado debe seguir las reglas del formato de correo electrónico, también sirve como una guía para los dispositivos móviles para saber que caracteres del teclado poder mostrar, como por ejemplo el arroba.
La etiqueta es la siguiente:
<input type="email" id="user-email" name="userEmail" /> La mayoría de los navegadores hoy en día soportan este tipo de campo, para obtener la lista completa puedes visitar el siguiente enlace: https://caniuse.com/input-email-tel-url
En nuestro ejemplo, vamos a tener un formulario sencillo compuesto por el campo email y el botón de enviar, a continuación el código HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Email validation example</title>
</head>
<body>
<form>
<label for="user-email">Email: </label>
<input type="email" id="user-email" name="userEmail" />
<input type="submit" value="Validate" />
</form>
</body>
</html> Expresiones regulares
Las expresiones regulares son una secuencia de caracteres que conforma un patrón de búsqueda que usaremos para encontrar una o varias coincidencias en un texto. Esto nos permite comprobar la validez de fechas, contraseñas, códigos postales, emails, entre otros formatos.
En nuestro ejemplo vamos a utilizar los siguientes elementos
- Meta carácter w: Que abarca los caracteres desde la a-z, A-Z y 0-9.
- Cuantificador +: Que indica que debe haber 1 o más ocurrencias del patrón definido
- Cuantificador ?: Que indica que puede haber 0 o 1 ocurrencia del patrón definido.
- Cuantificador *: Que indica que debe haber 0 o más ocurrencias del patrón definido
- Cuantificador {n,m}: Que indica que el patrón se puede repetir entre un mínimo de n veces hasta un máximo de m
- Meta carácter ^: Indica que el texto debe empezar por el patrón definido
- Meta carácter $: Indica que el texto debe finalizar por el patrón definido
- Grupo []: El par de corchetes indican que el texto puede tener algunos de los caracteres que se encuentren en dicho grupo.
Expresión regular para email
- Empezar por el identificador o nombre del usuario
^\w+([.-_+]?\w+)* - Seguido por el símbolo de la arroba
@ - Por último, el nombre del dominio del correo
\w+([.-]?\w+)*(\.\w{2,10})+$
[email protected], si no cumple con estas reglas podemos decir que el correo no es válido.El patrón a utilizar es el siguiente: /^\w+([.-_+]?\w+)*@\w+([.-]?\w+)*(\.\w{2,10})+$/ Validación mediante Javascript
Vamos a crear una función en JavaScript la cual obtendrá una referencia del campo tipo email mediante su id, luego utilizando expresiones regulares hará un test al texto introducido para confirmar que cumpla con el formato de un correo electrónico válido.
La función es la siguiente:
function validateEmail(){
// Get our input reference.
var emailField = document.getElementById('user-email');
// Define our regular expression.
var validEmail = /^\w+([.-_+]?\w+)*@\w+([.-]?\w+)*(\.\w{2,10})+$/;
// Using test we can check if the text match the pattern
if( validEmail.test(emailField.value) ){
alert('Email is valid, continue with form submission');
return true;
}else{
alert('Email is invalid, skip form submission');
return false;
}
} El último paso es conectar nuestra función de validación con el botón de enviar y así evitar que se procese el formulario si el email no es válido, el código final nos queda de la siguiente manera
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Email validation example</title>
<script type="text/javascript">
function validateEmail(){
// Get our input reference.
var emailField = document.getElementById('user-email');
// Define our regular expression.
var validEmail = /^\w+([.-_+]?\w+)*@\w+([.-]?\w+)*(\.\w{2,10})+$/;
// Using test we can check if the text match the pattern
if( validEmail.test(emailField.value) ){
alert('Email is valid, continue with form submission');
return true;
}else{
alert('Email is invalid, skip form submission');
return false;
}
}
</script>
</head>
<body>
<form>
<label for="user-email">Email: </label>
<input type="email" id="user-email" name="userEmail" />
<input type="submit" value="Validate" onclick="return validateEmail()" />
</form>
</body>
</html> Validar email usando jQuery
jQuery es una librería javascript muy popular que permite ejecutar código lo más compatible posible entre los distintos navegadores.
Lo primero que tenemos que hacer es cargar la librería jQuery en nuestro código HTML, usualmente en el <head> de nuestro documento colocamos el siguiente tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> jQuery('#user-email').val(), el código final queda de la siguiente manera<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Email validation example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<form>
<label for="user-email">Email: </label>
<input type="email" id="user-email" name="userEmail" />
<input type="submit" value="Validate" onclick="return validateEmail()" />
</form>
<script type="text/javascript">
function validateEmail(){
// Define our regular expression.
var validEmail = /^\w+([.-_+]?\w+)*@\w+([.-]?\w+)*(\.\w{2,10})+$/;
// Using test we can check if the text match the pattern
if( validEmail.test( jQuery('#user-email').val() ) ){
alert('Email is valid, continue with form submission');
return true;
}else{
alert('Email is invalid, skip form submission');
return false;
}
}
</script>
</body>
</html> Referencias
A continuación una serie de enlaces en los cuales puedes encontrar mayor información acerca de las expresiones regulares y el formato de email
¿Qué tal te ha parecido este post? Déjame saberlo en la sección de comentarios y síguenos en nuestras redes sociales para más tips.
