La limitación de correo electrónico controla cuántos mensajes envías por hora o por día, evitando que los proveedores de correo electrónico traten tus campañas como spam o...
Puntos Clave
- El código JavaScript del lado del cliente, ya sean atributos HTML5, expresiones regulares o bibliotecas, solo puede confirmar el formato del correo electrónico. No puede verificar que exista un buzón de correo ni que una dirección sea válida.
- Para la validación de correo electrónico mediante JavaScript, el enfoque más eficaz consiste en superponer métodos: un atributo HTML5 como base, expresiones regulares para obtener retroalimentación inmediata y una llamada a la API para confirmar la existencia del buzón antes de enviar el formulario.
- Una API de validación de correo electrónico detecta lo que ningún método del lado del cliente puede: errores tipográficos en dominios que parecen reales, direcciones desechables, dominios genéricos, cuentas basadas en roles y trampas de spam.
Alrededor de 30% Un porcentaje considerable de las direcciones de correo electrónico en una lista se vuelven inválidas en el plazo de un año, y si más del 10 % de su lista no es válida, menos del 44 % de sus correos electrónicos se entregan. Muchas de esas direcciones inválidas ingresan a las bases de datos a través de formularios con una validación deficiente.
La validación de correo electrónico en JavaScript funciona por capas. Comprobar si una dirección tiene el formato correcto es relativamente sencillo. Confirmar que el dominio puede recibir correo es más complejo, pero posible. La parte difícil reside en verificar que el buzón de correo exista realmente y pueda aceptar mensajes, algo que JavaScript, que solo funciona en el navegador, no puede hacer por sí solo.
La validación suele realizarse en tres niveles: sintaxis, dominio y buzón de correo. JavaScript gestiona bien las comprobaciones de sintaxis, mientras que las bibliotecas y las API pueden ayudar a verificar los dominios. Sin embargo, la verificación del buzón de correo requiere una solicitud a la API del servidor, ya que el navegador no puede confirmar directamente si una bandeja de entrada es real.
Métodos para validar correos electrónicos en JavaScript
Cada método que se describe a continuación añade una capa a su sistema de validación. Están ordenados del más sencillo al más exhaustivo. La mayoría de las aplicaciones en producción utilizan al menos dos, mientras que los flujos de registro críticos para la seguridad utilizan los cuatro.
1. El atributo HTML5 type=”email”
El punto de partida más sencillo para la validación de correo electrónico en JavaScript es el atributo HTML5 type="email" en el elemento de entrada. Los navegadores aplican automáticamente la validación básica del formato cuando se envía el formulario.
Dirección de correo electrónico
Entregar
El navegador comprueba que el campo contenga el símbolo @ y una cadena similar a un dominio antes de permitir el envío. La validación se ejecuta al enviar el formulario de forma predeterminada.
Sin embargo, la comprobación de HTML5 es muy básica. Acepta direcciones como a@b o usuario@dominio, aunque nunca recibirían correos electrónicos reales. Tampoco ofrece información en tiempo real mientras se escribe. Por lo tanto, úsela como punto de partida: inclúyala siempre, pero nunca la considere su única comprobación.
2. Validación con un patrón de expresiones regulares
Las expresiones regulares (Regex) son el método de validación de correo electrónico más común en JavaScript. Permiten verificar el formato de forma automática, antes de enviar el formulario, y proporcionan retroalimentación inmediata.
Aquí tienes una expresión regular básica que cubre los formatos válidos más comunes:
función isValidEmail(email) {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
devolver regex.test(correo electrónico);
}
// uso
console.log(isValidEmail(“sales@costex.com")); // verdadero
console.log(isValidEmail(“notanemail”)); // falso
Entendiendo el patrón:
- ^ — inicio de cadena
- [^\s@]+ — uno o más caracteres que no son espacios en blanco ni @
- @ — el símbolo @ literal
- [^\s@]+ — uno o más caracteres después de @ (el dominio)
- \. — un punto literal
- [^\s@]+$ — uno o más caracteres después del punto (el TLD)
Para una validación más estricta alineada con RFC 5322, puede utilizar un patrón más específico:
función isValidEmail(email) {
const regex = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*\.[a-zA-Z]{2,}$/;
devolver regex.test(correo electrónico);
}
Envolver la expresión regular en una función reutilizable como isValidEmail() mantiene la lógica de validación en un solo lugar y facilita su actualización.
La mayor limitación es que las expresiones regulares solo comprueban el formato. No pueden determinar si existe un dominio o si un buzón de correo es real. Una dirección como sales@costex.com Seguirá pasando porque el formato parece válido, aunque el dominio tenga un error tipográfico y es probable que el correo electrónico nunca se entregue.
3. Uso de una biblioteca de validación de JavaScript
Bibliotecas consolidadas como validator.js manejan muchos casos que las expresiones regulares básicas no cubren, incluyendo dominios internacionales, formatos de correo electrónico inusuales pero válidos y extensiones de dominio más recientes. Si tu aplicación ya utiliza un marco de validación, una biblioteca es la opción más limpia que mantener expresiones regulares personalizadas.
Instalar validator.js:
npm install validator
Úselo en su código:
import validator from 'validator';
función isValidEmail(email) {
devolver validador.isEmail(correo electrónico);
}
// uso
console.log(isValidEmail(“sales@costex.com")); // verdadero
console.log(isValidEmail(“sales@costex.com")); // FALSO
console.log(isValidEmail(“user@example”)); // falso
El método validator.isEmail() realiza una comprobación de formato más completa que una simple expresión regular y detecta muchos problemas de formato comunes.
La limitación es la misma: las bibliotecas solo validan la estructura, no la capacidad de entrega. Una dirección como sales@costex.com Sigue siendo válido porque el formato es técnicamente correcto. Para los flujos de registro en producción, donde la calidad de la lista es importante, este método requiere una llamada a la API.
4. Validación con una API de validación de correo electrónico
Un enfoque basado en API es el único método que puede confirmar que un buzón de correo realmente existe. Los métodos vistos hasta ahora solo validan el formato de una dirección de correo electrónico. Una API comprueba si la dirección puede recibir correos.
El API de validación de correo electrónico DeBounce Comprueba la sintaxis, los registros MX del dominio, la existencia del buzón, el estado de las direcciones desechables, las cuentas de rol y el comportamiento del dominio comodín, todo en una sola llamada a la API. Aquí tienes un ejemplo usando fetch() en JavaScript:
función asíncrona validateEmailWithAPI(email) {
const apiKey = 'TU_CLAVE_API_DE_DEBOUNCE';
const url = `https://api.debounce.io/v1/?api=${apiKey}&email=${encodeURIComponent(email)}`;
tratar {
const respuesta = esperar a obtener(url);
const data = esperar respuesta.json();
regreso {
resultado: data.debounce?.result,
motivo: data.debounce?.reason,
free_email: data.debounce?.free_email === “true” || data.debounce?.free_email === true,
did_you_mean: data.debounce?.did_you_mean,
rol: data.debounce?.role === “true” || data.debounce?.role === true
};
} atrapar (error) {
console.error('Error de validación:', error);
volver nulo;
}
}
Los campos de respuesta que más interesan a los desarrolladores son:
- Resultado: el veredicto de nivel superior: "Seguro para enviar", "Arriesgado" o "Inválido".
- motivo: el hallazgo específico: entregable, desechable, comodín, error de sintaxis, etc.
- did_you_mean — una dirección corregida si la API detecta un error tipográfico común (por ejemplo, gmial.com → gmail.com)
- free_email — indica si la dirección pertenece a un proveedor gratuito como Gmail o Yahoo.
Para la detección específica de correos electrónicos desechables del lado del cliente, DeBounce también ofrece una API de correo electrónico desechable gratuita que puedes llamar directamente desde el navegador sin exponer tu clave API principal.
Si prefieres no escribir ningún código, el Widget de validación de JavaScript Se instala con una sola etiqueta de script y gestiona la validación directamente en tus formularios sin necesidad de integración personalizada.
Implementación de la validación de correo electrónico en tiempo real
La validación de correo electrónico en tiempo real mejora tanto la experiencia del usuario como la calidad de los datos, ya que los usuarios pueden corregir errores de inmediato en lugar de esperar a que se envíe el formulario. Lo importante es elegir el evento adecuado para el tipo de validación que se esté realizando.
El evento `oninput` se activa con cada pulsación de tecla, lo que resulta útil para comprobaciones rápidas como la validación de expresiones regulares. El evento `onchange` se activa después de que el campo pierde el foco, lo que lo hace más adecuado para la validación de API, ya que espera a que el usuario termine de escribir antes de enviar una solicitud.
Aquí tienes una configuración sencilla en tiempo real que utiliza oninput y una comprobación con expresiones regulares:
const emailInput = document.getElementById('email');
const feedbackEl = document.getElementById('email-feedback');
emailInput.addEventListener('input', function () {
const email = this.value;
Si (email.length === 0) {
feedbackEl.textContent = ”;
this.classList.remove('valid', 'invalid');
volver;
}
Si (esCorreoElectrónicoVálido(correo electrónico)) {
this.classList.add('valid');
this.classList.remove('invalid');
feedbackEl.textContent = '✓ Se ve bien';
} Else {
this.classList.add('inválido');
this.classList.remove('valid');
feedbackEl.textContent = 'Por favor, introduzca una dirección de correo electrónico válida';
}
});
Al usar un método de API, aplique un retardo a la llamada, esperando a que el usuario deje de teclear durante 300-500 ms antes de enviar la solicitud. Esto evita enviar una llamada a la API por cada pulsación parcial de tecla.
let anti-reboteTimer;
emailInput.addEventListener('input', function () {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
validarCorreoElectrónicoConAPI(this.value).luego(resultado => {
si (resultado?.¿quisiste decir?) {
feedbackEl.textContent = `¿Te referías a ${result.did_you_mean}?`;
}
});
}, 400);
});
Una buena retroalimentación en tiempo real es clara y específica. "¿Te referías a...?" sales@costex.comEl mensaje de interrogación es útil, mientras que los mensajes genéricos como "Correo electrónico no válido" frustran a los usuarios y aumentan el abandono del formulario.
Validación de correo electrónico en frameworks JavaScript populares
Las bibliotecas de formularios a nivel de framework se encargan de la gestión del estado, la visualización de errores y la lógica de envío, por lo que integrar la validación generalmente significa especificar una regla en lugar de conectar eventos manualmente.
React con React Hook Form:
import { useForm } from 'react-hook-form';
export default function SignupForm() {
const { registrar, manejarEnvío, estadoFormulario: { errores } } = usarFormulario();
regreso (
console.log(datos))}>
{…registrar('correo electrónico', {
requerido: 'Se requiere correo electrónico',
patrón: {
valor: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
Mensaje: 'Introduzca una dirección de correo electrónico válida'
}
})}
/>
{errors.email && {errors.email.message} }
Inscribirse
);
}
Vue con VeeValidate:
import { useField, useForm } from 'vee-validate';
exportar predeterminado {
configuración() {
const { handleSubmit } = useForm();
const { valor: correo electrónico, mensaje de error } = useField('correo electrónico', (val) => {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val) || 'Ingrese una dirección de correo electrónico válida';
});
const onSubmit = handleSubmit(values => console.log(values));
devolver { correo electrónico, mensaje de error, al enviar };
}
};
Validación de esquemas con Zod o Yup (útil cuando se desea compartir la lógica de validación entre el cliente y el servidor):
import { z } from 'zod';
const emailSchema = z.string().email('Ingrese una dirección de correo electrónico válida');
función validarCorreo(correo) {
const resultado = emailSchema.safeParse(correo electrónico);
devolver result.success ? null : result.error.issues[0].message;
}
En los tres casos, el framework se encarga de la configuración mientras usted proporciona la regla de validación. Si posteriormente reemplaza la expresión regular con una llamada a la API, la estructura general se mantiene prácticamente igual.
Limitaciones de la validación de correo electrónico del lado del cliente
La validación del lado del cliente puede comprobar si una dirección de correo electrónico parece válida, pero no puede determinar si realmente funciona. Estos son algunos problemas que JavaScript por sí solo no puede detectar.
- Errores tipográficos en dominios que parecen reales: Direcciones como sales@costex.com, sales@costex.com, o sales@costex.com El correo electrónico pasa la validación de formato aunque los dominios estén mal escritos. El usuario nunca recibe el correo y la dirección permanece en tu lista, generando rebotes.
- Direcciones de correo electrónico desechables y temporales: Servicios como 10minutemail.com y guerrillamail.com crean buzones de correo temporales que superan las comprobaciones de validación. Los usuarios suelen introducirlas para evitar los formularios de registro, y la dirección desaparece poco después.
- Dominios comodín: Algunos dominios están configurados para aceptar todos los correos electrónicos que se les envían, independientemente de si existe o no el buzón específico. Una dirección en un dominio comodín pasará la validación de formato, las comprobaciones MX e incluso algunas comprobaciones SMTP, pero en la práctica seguirá siendo imposible de entregar.
- Direcciones basadas en roles: Las direcciones como info@, sales@, admin@ y support@ suelen ser gestionadas por equipos en lugar de por personas. Generan mayores índices de quejas y generalmente no son adecuadas para listas de marketing. Un patrón de expresiones regulares no puede identificarlas de forma fiable.
- Trampas de spam: Se trata de direcciones de correo electrónico que utilizan las organizaciones de gestión de la entrega para identificar remitentes con listas de contactos poco saludables. Parecen completamente normales y pasan la validación del cliente, pero enviar correos a estas direcciones puede dañar tu reputación como remitente.
La API de validación de correo electrónico de DeBounce detecta los cinco problemas mediante comprobaciones en tiempo real a nivel de buzón y datos de validación actualizados continuamente. Para mantener la calidad de la lista a largo plazo, herramientas de verificación de correo electrónico También puede volver a comprobar los contactos antiguos de forma masiva, lo que ayuda a eliminar las direcciones que dejan de ser válidas con el tiempo.
Buenas prácticas para la validación de correo electrónico en JavaScript
Una buena validación de correo electrónico utiliza múltiples comprobaciones de forma conjunta para mejorar la calidad de los datos, la experiencia del usuario y la capacidad de entrega.
- Implementa la validación por capas: comienza con el atributo de correo electrónico de HTML5, agrega una expresión regular o una biblioteca de validación y, a continuación, utiliza una llamada a la API para la verificación a nivel de buzón. Cada capa detecta los problemas que la anterior no detectó, mientras que las comprobaciones previas proporcionan información instantánea sin necesidad de esperar una solicitud de red.
- Nunca confíe únicamente en la validación del lado del cliente para flujos críticos de seguridad: la validación basada en el navegador puede eludirse, por lo que las direcciones de correo electrónico siempre deben validarse nuevamente en el servidor antes de procesar registros, compras o creación de cuentas.
- Utilice una biblioteca o API probada en condiciones reales en lugar de mantener expresiones regulares personalizadas a largo plazo: los formatos de direcciones de correo electrónico evolucionan. Una biblioteca o API que se mantiene activamente gestiona los nuevos casos límite sin necesidad de que actualice sus propios patrones.
- Las llamadas a la API de Debounce proporcionan una retroalimentación visual clara: un indicador de carga mientras se ejecuta la API, una marca de verificación verde en caso de éxito y un mensaje de error específico en caso de fallo ("¿Desea...?" sales@costex.com?”) mantén el formulario adaptable y reduce el abandono.
- Resultados de la validación de registros durante el desarrollo: Los proveedores de correo electrónico desechables, los errores tipográficos repetidos y los dominios sospechosos se hacen evidentes una vez que se revisan los registros, lo que facilita el endurecimiento de las reglas de validación con el tiempo.
- Validar también a nivel de lista: la validación en tiempo real detecta direcciones incorrectas durante el registro, mientras que Validación de listas de correo electrónico Ayuda a eliminar las direcciones que posteriormente se vuelven inactivas.
Lo más importante es...
La validación HTML5 ofrece comprobaciones básicas de formato de forma gratuita. Las bibliotecas de expresiones regulares y validación mejoran la experiencia del usuario con una respuesta rápida del lado del cliente, mientras que las API verifican si un buzón de correo existe realmente y puede recibir correos electrónicos.
Ese último paso es crucial. La validación del lado del cliente por sí sola no puede confirmar que una dirección sea real, activa o segura para enviar correos. En los formularios de registro para producción, donde la entregabilidad y la calidad de la lista son fundamentales, la validación mediante API es lo que impide que correos electrónicos temporales, dominios con errores tipográficos, direcciones genéricas y otros contactos no deseados ingresen a la base de datos.
El DeBounce API de validación de correo electrónico agrega esa verificación a nivel de buzón directamente a su flujo de registro, lo que ayuda a bloquear direcciones incorrectas antes de que afecten su reputación de remitente. Si desea una configuración más rápida, Widget de validación de JavaScript Proporciona una forma sencilla, sin necesidad de código, de añadir validación de correo electrónico en tiempo real directamente a tus formularios.
