Descubre cómo validar un correo electrónico en JavaScript y HTML para asegurarte de que los usuarios ingresen un email válido en tus formularios. Aprende a utilizar validaciones nativas y expresiones regulares para una verificación más avanzada.
Tambien lee:
La validación de emails es una parte esencial en los formularios web. En este tutorial, creado por AsensiDev, aprenderás a implementar un sistema que detecta si el correo ingresado por el usuario es válido o no, mostrando mensajes personalizados en tiempo real.
Requisitos previos
Antes de comenzar, asegúrate de contar con lo siguiente:
- Visual Studio Code instalado.
- Live Server activado para previsualizar cambios en tiempo real.
- Archivos index.html, styles.css y script.js creados en tu carpeta de proyecto.
Paso 1: Crear la estructura del formulario en HTML
En tu archivo index.html, agrega el siguiente código para crear un formulario de validación de email:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validación de Email</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form id="email-form">
<label for="email">Correo:</label>
<input type="text" id="email" name="email" placeholder="Ingrese su email">
<p id="feedback" class="error"></p>
<button type="submit">Validar Email</button>
</form>
<script src="script.js"></script>
</body>
</html>
🔹 Explicación del código:
<form>: Contiene el campo de entrada y el botón de validación.<input type="text">: Campo donde el usuario introduce su email.<p id="feedback">: Espacio donde se mostrará si el email es válido o no.<button>: Activa la validación al hacer clic.
Paso 2: Aplicar estilos con CSS
En styles.css, añade estilos para centrar el formulario y destacar los mensajes de validación:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
margin: 0;
}
form {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
input {
width: 100%;
padding: 8px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #6200ea;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #4500b3;
}
.error {
color: red;
font-size: 14px;
}
.success {
color: green;
font-size: 14px;
}🎨 ¿Qué mejoras aplicamos?
- Mensajes de error en rojo y éxito en verde.
- Diseño centrado y responsivo.
- Sombra y bordes redondeados para un mejor aspecto.
Paso 3: Implementar la validación en JavaScript
En script.js, agrega la validación utilizando expresiones regulares:
const form = document.querySelector("#email-form");
const emailInput = document.querySelector("#email");
const feedback = document.querySelector("#feedback");
form.addEventListener("submit", function (event) {
event.preventDefault(); // Evita que la página se recargue
const email = emailInput.value;
if (validarEmail(email)) {
feedback.textContent = "El email introducido es válido.";
feedback.className = "success";
} else {
feedback.textContent = "El email introducido no es válido.";
feedback.className = "error";
}
});
// Función para validar email con expresión regular
function validarEmail(email) {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return regex.test(email);
}💡 ¿Cómo funciona el código?
- Captura el formulario y el campo de email.
- Escucha el evento “submit” para validar el email.
- Usa una expresión regular para comprobar si el email es válido.
- Muestra mensajes personalizados en color verde (válido) o rojo (inválido).
Mira el tutorial completo sobre validar emails
Este contenido forma parte del tutorial creado por AsensiDev. Si prefieres seguir el proceso en video, aquí tienes el enlace: 👇
Ahora tienes un formulario con validación de email en JavaScript y HTML. Puedes aplicar este método en tus proyectos para asegurarte de que los usuarios ingresen correos electrónicos correctos antes de enviar formularios.
📌 ¿Quieres aprender más? Explora más tutoriales de AsensiDev y sigue mejorando tus habilidades de desarrollo web. 🚀
