Patrones de validación personalizados para campos de texto

A campo de texto Acepta cualquier texto que escriban los usuarios, pero a veces se necesitan formatos específicos. Las URL de sitios web, los códigos de producto, los números de licencia o los nombres compuestos solo por letras tienen patrones que los validan. Los patrones de validación personalizados permiten definir con precisión qué formato es aceptable, detectando errores antes del envío.

En esta guía, aprenderás cómo agregar patrones de validación personalizados a los campos de texto de tus formularios de WordPress.

¿Qué son los patrones de validación?

Nuestro Concepto

Los patrones de validación son reglas que definen qué entradas son válidas:

• “Debe contener solo letras”
• “Debe ser una URL válida”
• “Debe coincidir con el formato ABC-1234”
• “Debe tener exactamente 10 caracteres”

Cómo trabajan ellos

1. El usuario escribe en el campo de texto.
2. Al enviar (o mientras escriben), la entrada se compara con un patrón.
3. Si coincide: la validación se realiza correctamente.
4. Si no funciona: Se muestra un mensaje de error.

Beneficios

• Calidad de los datos: Garantizar formatos uniformes
• Prevención de errores: Detectar errores a tiempo
• Guía de usuario: Expectativas claras
• Compatibilidad descendente: Los datos funcionan con otros sistemas.

Patrones de validación integrados

Constructor de formularios automático Incluye patrones comunes:

Uso de patrones integrados

Paso 1: Agregar campo de texto

1. Abra su formulario en AFB
2. Arrastre (Resistencia) Texto campo para formar
3. Haga clic para configurar

Paso 2: Seleccionar patrón de validación

1. Encuentre Patrón de validación en la configuración de
2. Seleccione una opción del menú desplegable:
   • Ninguno (sin patrón)
   • Correo electrónico
   • URL
   • Sólo letras
   • Sólo números
   • Alfanumérico
   • Personalizado
3. Guardar la configuración

Paso 3: Validación de la prueba

1. Formulario de vista previa
2. Prueba con una entrada válida; debería funcionar.
3. Prueba con una entrada no válida; debería mostrar un error.

Ejemplos de patrones y casos de uso

Validación de URL

Usar para:

• Campo del sitio web
• Enlaces de cartera
• Perfiles de redes sociales
• URL de referencia

Ejemplos válidos:

• https://example.com
• http://www.example.com/page
• https://example.com/path?query=value

Ejemplos no válidos:

• example.com (protocolo faltante)
• www.example.com (protocolo faltante)
• solo un poco de texto

Sólo letras

Usar para:

• Nombre y apellidos (validación simple)
• nombres de ciudades
• Códigos de pais
• Identificadores alfabéticos

Ejemplos válidos:

• Juan
• Smith
• New York

Ejemplos no válidos:

• John123
• Nueva York (espacio)
• O'Brien (apóstrofe)

Nota: El uso exclusivo de letras es estricto. Considere si necesita espacios, guiones o acentos.

Sólo números

Usar para:

• Números de identificación
• Números de cuenta
• Cantidad (cuando no se utiliza un campo numérico)
• códigos PIN

Ejemplos válidos:

• 12345
• 00123
• 9876543210

Ejemplos no válidos:

• 123-456 (guion)
• 123.45 (decimal)
• 12345A

Alfanumérico

Usar para:

• Códigos de producto
• Números de referencia
• Nombres de usuario
• Números de serie

Ejemplos válidos:

• ABC123
• User42
• PROD001

Ejemplos no válidos:

• ABC-123 (guion)
• ABC 123 (espacio)
• ABC_123 (guion bajo)

Patrones de validación personalizados (Regex)

¿Qué es Regex?

Las expresiones regulares (regex) son patrones que describen formatos de texto:

• ^ = Inicio de la cadena
• $ = Fin de la cadena
• [A-Z] = Cualquier letra mayúscula
• [a-z] = Cualquier letra minúscula
• [0-9] = Cualquier dígito
• {3} = Exactamente 3 de los anteriores
• {2,5} = Entre 2 y 5 de los anteriores
• + = Uno o más
• * = Cero o más
• ? = Opcional (cero o uno)

Creación de patrones personalizados

1. Seleccione “Personalizado” en el menú desplegable de validación.
2. Introduzca su patrón de expresión regular
3. Prueba con varias entradas

Ejemplos comunes de patrones personalizados

Código postal de EE. UU.

Patrón: ^\d{5}(-\d{4})?$

Valida:

• 12345 (5 dígitos)
• 12345-6789 (Código postal +4)

Rechaza:

• 1234 (demasiado corto)
• 123456 (demasiado largo)
• ABCDE (letras)

Número de teléfono de EE. UU.

Patrón: ^\d{3}-\d{3}-\d{4}$

Valida: 555-123-4567

Para un formato flexible: ^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$

Valida:

• 555-123-4567
• (555) 123-4567
• 555.123.4567
• 555 123 4567

Código de producto (formato ABC-1234)

Patrón: ^[A-Z]{3}-\d{4}$

Valida:

• ABC-1234
• XYZ-9999
• PRO-0001

Rechaza:

• abc-1234 (minúsculas)
• AB-1234 (solo 2 letras)
• ABC1234 (falta el guion)

Matrícula (varios formatos)

Patrón (general de EE. UU.): ^[A-Z0-9]{1,7}$

Valida: 1-7 letras mayúsculas/números

Tarjeta de crédito (formato básico)

Patrón: ^\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}$

Valida:

• 1234567890123456
• 1234 5678 9012 3456
• 1234-5678-9012-3456

Nota: Para realizar pagos reales, utilice procesadores de pago adecuados con su correspondiente validación.

Nombre de usuario (letras, números, guion bajo)

Patrón: ^[a-zA-Z][a-zA-Z0-9_]{2,19}$

Reglas:

• Empieza con la letra
• 3-20 caracteres en total
• Solo letras, números y guiones bajos.

Valida: usuario_123, JohnDoe, prueba42

Código de Color Hexadecimal:

Patrón: ^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$

Valida:

• # FF5733
• #fff
• #ABC123

Fecha (AAAA-MM-DD)

Patrón: ^\d{4}-\d{2}-\d{2}$

Valida: 2026-01-15

Nota: Para las fechas, suele ser mejor usar un campo de fecha con un selector de fechas.

Hora (HH:MM, formato de 24 horas)

Patrón: ^([01]\d|2[0-3]):[0-5]\d$

Valida:

• 09:30
• 14:45
• 23:59

Número de factura (INV-AAAA-NNNN)

Patrón: ^INV-\d{4}-\d{4}$

Valida:

• INV-2026-0001
• INV-2025-1234

Número de Seguro Social (EE. UU.)

Patrón: ^\d{3}-\d{2}-\d{4}$

Valida: 123-45-6789

Advertencia: Tenga cuidado al recopilar números de seguridad social: existen implicaciones para la seguridad y la privacidad.

Construyendo tus propios patrones

Proceso paso a paso

1. Definir requisitos: ¿Qué formato necesitas?
2. Descomponerlo: ¿Qué personajes, cuántos, en qué orden?
3. Patrón de construcción: Traducir a expresión regular
4. Prueba a fondo: Entradas válidas e inválidas
5. Escriba el mensaje de error: Ayudar a los usuarios a comprender el formato

Ejemplo: ID de empleado

Requisito: 2 letras + 4 dígitos + 1 letra (por ejemplo, AB1234C)

Descompostura:

• 2 letras mayúsculas: [A-Z]{2}
• 4 dígitos: \d{4}
• 1 letra mayúscula: [A-Z]
• Nada antes ni después: ^ y $

Patrón final: ^[A-Z]{2}\d{4}[A-Z]$

Patrones de prueba

Antes de usarlo en el formulario:

• Prueba con entradas válidas (debería pasar).
• Prueba de entradas no válidas (debería fallar)
• Casos límite de prueba (límites, caracteres especiales)
• Utilice probadores de expresiones regulares en línea para depurar.

Mensajes de error para la validación

Mensajes predeterminados

• “Por favor, introduzca un valor válido”
• Este campo no es válido.

Mejores mensajes personalizados

Indique a los usuarios el formato esperado:

Uso de texto de marcador de posición y de ayuda

Evite errores mostrando el formato de antemano:

• Marcador de posición: “ABC-1234”
• Texto de ayuda: “Introduzca su código de producto (por ejemplo, ABC-1234)”

BUENAS PRÁCTICAS

1. Empiece de forma sencilla

Utilice patrones predefinidos siempre que sea posible. Las expresiones regulares personalizadas añaden complejidad.

2. No sobrevalides

Los patrones demasiado estrictos frustran a los usuarios:

• Nombres con guiones (Mary-Jane)
• Nombres con apóstrofes (O'Brien)
• Personajes internacionales (José, Müller)

3. Mostrar el formato esperado

Siempre diles a los usuarios lo que esperas de ellos:

• Marcador de posición con ejemplo
• Texto de ayuda que explica el formato
• Borrar mensaje de error

4. Pruebe casos extremos

• Entrada vacía
• Espacios al principio/final
• Caracteres especiales
• Longitud máxima

5. Considerar alternativas

A veces, otros enfoques son mejores:

• Fechas → Usar campo de fecha
• Números → Usar campo Número
• Teléfono → Usar el campo Teléfono con formato
• Opciones fijas → Usar menú desplegable

Combinación con otras validaciones

Patrón + Requerido

• El campo debe rellenarse Y coincidir con el patrón.
• Los fallos vacíos son “obligatorios”.
• Patrón de fallos de formato incorrecto

Patrón + Longitud mínima/máxima

• El patrón valida el formato.
• La longitud valida el tamaño
• Ambos deben pasar

Patrones de resolución de problemas

El patrón no funciona

Comprobar:

• La sintaxis es correcta (sin errores tipográficos).
• Los personajes especiales escaparon correctamente
• Anclajes ^ y $ si es necesario

Entrada válida rechazada

Comprobar:

• El patrón puede ser demasiado estricto.
• Faltan caracteres válidos en el patrón.
• Problemas de sensibilidad a mayúsculas y minúsculas

Entrada no válida aceptada

Comprobar:

• El patrón puede ser demasiado impreciso.
• Anclas faltantes (^ y $)
• Prueba con más ejemplos

Preguntas frecuentes

¿Puedo combinar varios patrones?

Un solo campo utiliza un patrón. Para una validación compleja, combine los requisitos en una expresión regular usando la alternancia (|) o cree el patrón para que coincida con todos los requisitos.

¿Los patrones distinguen entre mayúsculas y minúsculas?

Por defecto, sí. Utilice [A-Za-z] para que coincidan ambos casos, o añada la bandera que no distingue entre mayúsculas y minúsculas si es compatible.

¿Cómo puedo permitir espacios?

Agregue \s a su clase de caracteres: [A-Za-z\s] coincide con letras y espacios.

¿Qué ocurre con los personajes internacionales?

El alfabeto estándar [A-Za-z] no incluye caracteres acentuados. Para nombres internacionales, considere una validación menos estricta o utilice \p{L} (si es compatible) para cualquier letra.

¿Debo validar al desenfocar o enviar?

Ambas opciones funcionan. Al perder el foco, se obtiene una respuesta más rápida. Al enviar el formulario, se registra todo. Muchos formularios utilizan ambas funciones.

Resumen

Agregar patrones de validación personalizados:

1. Seleccione el tipo de patrón – Integrado o personalizado
2. Patrón de configuración – Seleccione o introduzca la expresión regular.
3. Añadir marcador de posición – Mostrar el formato esperado
4. Añadir texto de ayuda – Explicar los requisitos
5. Establecer mensaje de error – Corrección de la guía
6. Prueba a fondo – Entradas válidas e inválidas

Conclusión

Los patrones de validación personalizados garantizan la calidad de los datos al aplicar formatos específicos. Ya sea que necesite validar URL, códigos de producto o identificadores personalizados, los patrones detectan errores antes del envío y guían a los usuarios para que introduzcan la información correcta.

Constructor de formularios automático Incluye patrones comunes (correo electrónico, URL, letras, números, alfanuméricos) y admite expresiones regulares personalizadas para necesidades de validación especializadas. Unos datos limpios comienzan con una validación adecuada.

¿Listo para validar los datos de tu formulario? Descargar Auto Form Builder y asegúrese de que sus formularios recopilen datos con el formato correcto.