El Atributo PATTERN

El atributo pattern en HTML se utiliza para validar campos de formulario mediante expresiones regulares (regex), asegurando que el dato ingresado cumpla un formato específico. A continuación, aprenderás cómo implementarlo efectivamente.

1. Introducción al atributo pattern

• Propósito: Validar entradas de usuario en tiempo real (ej.: números de teléfono, contraseñas, códigos postales).

• Compatibilidad: Funciona en elementos <input> de tipo text, tel, email, password, etc.

• Importante:

  • La validación ocurre del lado del cliente.

  • Siempre debe complementarse con validación del lado del servidor.

2. Sintaxis básica

<input type="text" pattern="[expresión regular]" title="Mensaje de ayuda">

• pattern: Define la expresión regular que debe cumplir el valor.

• title: Mensaje que se muestra si la validación falla (opcional pero recomendado).

3. Ejemplos comunes

Ejemplo 1: Teléfono (formato 123-456-7890)

<input 
  type="tel" 
  pattern="d{3}-d{3}-d{4}" 
  title="Ingrese un teléfono válido: 123-456-7890"
  placeholder="123-456-7890"
>

• Explicación: d{3} valida 3 dígitos, seguidos de un guión y repite el patrón.

Ejemplo 2: Contraseña (mínimo 8 caracteres, al menos una mayúscula y un número)

<input 
  type="password" 
  pattern="(?=.*d)(?=.*[A-Z]).{8,}" 
  title="Mínimo 8 caracteres, una mayúscula y un número"
>

• Explicación:

  • (?=.*d): Al menos un dígito.

  • (?=.*[A-Z]): Al menos una letra mayúscula.

  • .{8,}: Mínimo 8 caracteres.

Ejemplo 3: Código postal (España: 5 dígitos)

<input 
  type="text" 
  pattern="d{5}" 
  title="5 dígitos (ejemplo: 28001)"
  placeholder="28001"
>

4. Notas sobre expresiones regulares

• Anclajes implícitos: El navegador agrega automáticamente ^ (inicio) y $ (fin). Ejemplo: pattern="[A-Za-z]{3}" equivale a ^[A-Za-z]{3}$.

• Caracteres especiales:

  • d: Dígitos (0-9).

  • w: Letras, números o guiones bajos ([A-Za-z0-9_]).

  • {n,m}: Entre n y m caracteres.

  • +: Uno o más caracteres.

  • *: Cero o más caracteres.

• Sensibilidad a mayúsculas: Las regex son sensibles a mayúsculas. Usa [A-Za-z] para permitir ambas.

5. Combinar con required

Si el campo es obligatorio, añade el atributo required:

<input 
  type="text" 
  pattern="[A-Za-z]{3}" 
  title="Tres letras" 
  required
>

6. Estilizar con CSS

Puedes resaltar campos válidos o inválidos:

input:valid {
  border: 2px solid green;
}

input:invalid {
  border: 2px solid red;
}

7. Consideraciones finales

• Espacios en blanco: Si los permites, inclúyelos en la regex (ej.: [A-Za-z ]+).

• Pruebas: Verifica tu regex en herramientas como RegExr.

• Validación del servidor: Nunca confíes solo en pattern, ya que puede ser desactivado.

Conclusión

El atributo pattern es una herramienta poderosa para mejorar la experiencia del usuario en formularios HTML. Combinado con regex adecuadas y un mensaje claro en title, garantizarás entradas más precisas y consistentes. ¡Experimenta con diferentes patrones y ajusta según tus necesidades!