CursosEmpresasBlogLiveConfPrecios

Validación de emails en JavaScript con regex

Clase 28 de 29 • Curso de Expresiones Regulares

Clase anteriorSiguiente clase
Resumen

Validar correos en el navegador con JavaScript y expresiones regulares no necesita frameworks. Con un HTML mínimo, el método String.match y cambios simples en el DOM, puedes activar un botón, dar retroalimentación visual y evitar errores de entrada. Aquí verás cómo construir la regex de forma incremental, depurarla y manejar detalles como la bandera case insensitive.

¿Cómo validar un email en JavaScript con expresiones regulares?

El objetivo es detectar si el texto en un input parece un email y, si hace match, habilitar el botón y colorear el campo. La lógica se basa en un HTML mínimo, un evento onkeyup y una función validate que opera sobre el string recibido.

¿Qué estructura mínima de HTML y JavaScript se necesita?

  • HTML bien formado con head, title, script, body y cierre correcto de etiquetas.
  • Un input de texto con name igual a email, un id y onkeyup que llama a la función validate con this.value.
  • Un botón con id y atributo disabled controlado desde JavaScript.
<!doctype html>
<html>
  <head>
    <title>JS + Regex</title>
    <script>
      function validate(str) {
        console.log(str); // referencia visual en consola.
        // lógica de regex y DOM aquí.
      }
    </script>
  </head>
  <body>
    <input type="text" id="in" name="email" onkeyup="validate(this.value)">
    <input type="button" id="boton" value="enviar" disabled>
  </body>
</html>

¿Cómo construir la regex paso a paso sin atascarse?

  • Empezar simple: comprobar que exista una arroba con algo antes y después, por ejemplo .*@. para validar la idea base.
  • Añadir el usuario: una clase de palabra con cuantificador, por ejemplo entre 2 y 10 caracteres antes de la arroba.
  • Añadir el dominio: otra palabra y un punto obligatorio.
  • Añadir el TLD: una palabra con longitud entre 2 y 5.
  • Aplicar bandera case insensitive o normalizar con toLowerCase() antes del match.

Ejemplo integrado con DOM y estilos:

function validate(str) {
  // usuario: 2–10, dominio: 2–10, TLD: 2–5, con bandera i.
  const re = /^\w{2,10}@\w{2,10}\.\w{2,5}$/i;
  const input = document.getElementById('in');
  const boton = document.getElementById('boton');

  if (str.match(re)) {
    input.style.backgroundColor = 'blue';
    boton.disabled = false;
  } else {
    input.style.backgroundColor = 'red';
    // opcional: boton.disabled = true;
  }
}
  • Habilidad clave: construir la expresión regular por incrementos, validando cada paso en la consola y evitando sobreingeniería temprana.
  • Palabras clave: String.match, bandera i (case insensitive), cuantificadores {m,n}, clases de palabra \w, TLD.

¿Qué errores comunes aparecen y cómo depurarlos?

Avanzar demasiado rápido en la regex puede bloquear el progreso. La estrategia efectiva es dividir el problema, validar desde un patrón mínimo y crecer gradualmente.

  • Atasco por complejidad: intentar la regex “perfecta” desde el inicio complica el debug.
  • Cuantificadores sin cota superior: se observó que una cota ilimitada no funcionó como se esperaba, se optó por rangos concretos como 2–5 o 2–10.
  • Diferencias entre motores: Chrome, Firefox y Safari pueden interpretar detalles de regex de forma distinta.
  • Lógica invertida con disabled: recordar que boton.disabled = false significa habilitar.
  • Uso de alert solo para depurar: “jamás usen alerts, más que para debuggear”.

¿Cómo depurar de forma efectiva en front end?

  • Imprimir el valor con console.log para saber qué entra a validate.
  • Reducir la regex a una comprobación mínima y rearmarla paso a paso.
  • Probar manualmente casos típicos: usuario, presencia de @, dominio, punto y TLD.
  • Confirmar el comportamiento del estilo: cambiar backgroundColor a rojo o azul para feedback inmediato.

Habilidades practicadas: depuración incremental, uso de consola, verificación visual en el DOM, control del estado de un botón.

¿Cómo mejorar la UX con cambios en el DOM al validar?

La validación no solo decide si algo es válido: también puede orientar al usuario. Un cambio de color y el estado del botón ayudan a evitar errores desde el teclado.

  • Input en rojo si no hay match, azul cuando el patrón se cumple.
  • Botón de enviar habilitado únicamente al hacer match.
  • Control directo del DOM con document.getElementById, element.style.backgroundColor y element.disabled.

Ejemplo aplicado con eventos de teclado:

<input type="text" id="in" name="email" onkeyup="validate(this.value)">
<input type="button" id="boton" value="enviar" disabled>
  • Conceptos aplicados: eventos de teclado (onkeyup), manipulación del DOM, estilos en línea, retroalimentación inmediata.
  • Nota de continuidad: se anuncia el uso de la herramienta del sistema grep con expresiones regulares en un entorno de backend.

¿Tienes otra estrategia para construir la regex o un caso especial de TLD que te haya dado problemas? Comparte tu experiencia y comentemos mejoras posibles.