tutoriales·3 分で読める

Expresiones Regulares: Patrones Esenciales para Validación de Formularios

Aprende a validar email, teléfono, código postal y password strength con regex, y probar patrones en tiempo real.

DevToolsHub Team
·
Expresiones Regulares: Patrones Esenciales para Validación de Formularios

¿Qué son las expresiones regulares?

Las expresiones regulares (regex) son patrones para buscar y manipular texto. Son especialmente útiles para validar formularios: puedes definir exactamente qué formato debe tener un email, teléfono o contraseña.

Nuestra herramienta Regex Tester te permite probar patrones en tiempo real contra texto de ejemplo.


Validar email

El patrón básico para email:

const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;

Explicación:

  • ^ — inicio de la cadena
  • [^s@]+ — uno o más caracteres que no sean espacio ni @
  • @ — literal @
  • [^s@]+ — dominio sin espacios ni @
  • \. — literal punto
  • [^s@]+ — TLD sin espacios ni @
  • $ — fin de la cadena
console.log(emailRegex.test('usuario@ejemplo.com')); // true
console.log(emailRegex.test('usuario@ejemplo'));     // false
console.log(emailRegex.test('usuario ejemplo.com')); // false

Un patrón más estricto (según RFC 5322):

const strictEmailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/;

Validar teléfono

Formato internacional (con código de país opcional):

const phoneRegex = /^+?[ds-]{10,}$/;

Explicación:

  • +? — opcional signo +
  • [ds-]+ — dígitos, espacios o guiones
  • {10,} — mínimo 10 caracteres
console.log(phoneRegex.test('+34 612 345 678')); // true
console.log(phoneRegex.test('612345678'));        // true
console.log(phoneRegex.test('123'));              // false

Para un formato específico (ej. España):

const spainPhoneRegex = /^(?:+34|0034)?[679]d{8}$/;

Validar código postal

España (5 dígitos):

const spainPostalRegex = /^(0[1-9]|[1-4]d|5[0-2])d{3}$/;

EE.UU. (ZIP code, 5 dígitos + opcional 4):

const usZipRegex = /^d{5}(-d{4})?$/;

Validar password strength

Mínimo 8 caracteres, al menos una mayúscula, una minúscula y un número:

const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d).{8,}$/;

Explicación:

  • (?=.*[a-z]) — lookahead: debe contener minúscula
  • (?=.*[A-Z]) — lookahead: debe contener mayúscula
  • (?=.*d) — lookahead: debe contener número
  • .{8,} — mínimo 8 caracteres
console.log(passwordRegex.test('Password1')); // true
console.log(passwordRegex.test('password'));  // false (sin mayúscula)
console.log(passwordRegex.test('PASSWORD'));  // false (sin minúscula)
console.log(passwordRegex.test('Pass1'));     // false (menos de 8)

Con caracteres especiales:

const strongPasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&]).{8,}$/;

Extraer datos con grupos de captura

Las regex no solo validan — también pueden extraer datos:

const dateRegex = /(d{4})-(d{2})-(d{2})/;
const match = '2024-06-07'.match(dateRegex);
console.log(match[1]); // año: 2024
console.log(match[2]); // mes: 06
console.log(match[3]); // día: 07

Extraer nombre de dominio de una URL:

const domainRegex = /^https?://(?:www.)?([^/]+)/;
const match = 'https://www.ejemplo.com/path'.match(domainRegex);
console.log(match[1]); // ejemplo.com

Probar patrones en tiempo real

Usa nuestra herramienta Regex Tester para:

  • Escribir el patrón regex
  • Introducir texto de prueba
  • Ver matches resaltados en tiempo real
  • Probar diferentes flags (g, i, m)

Errores comunes

No escapar caracteres especiales

// INCORRECTO — el punto significa "cualquier carácter"
const regex = /.com$/;

// CORRECTO — el punto literal
const regex = /.com$/;

Olvidar ^ y $

Sin ^ y $, el patrón puede coincidir con parte del texto en lugar de la cadena completa.

const emailRegex = /[^s@]+@[^s@]+.[^s@]+/; // sin ^ y $
console.log(emailRegex.test('texto usuario@ejemplo.com más texto')); // true (incorrecto)

Patrones demasiado complejos

Las regex complejas son difíciles de mantener. Si un patrón se vuelve ilegible, considera usar validación programática.


Resumen

  • Email: /^[^s@]+@[^s@]+.[^s@]+$/
  • Teléfono internacional: /^+?[ds-]{10,}$/
  • Password (mínimo): /^(?=.*[a-z])(?=.*[A-Z])(?=.*d).{8,}$/
  • Usa lookaheads (?=...) para reglas múltiples
  • Grupos de captura (...) extraen datos
  • Siempre escapa caracteres especiales: \., \*, \+
  • Prueba patrones en Regex Tester
#regex#validación#formularios#javascript#patrones

関連記事