Patróns de validación personalizados para campos de texto

Patróns de validación personalizados para campos de texto

A campo de texto acepta calquera cousa que escriban os usuarios, pero ás veces necesitas formatos específicos. As URL de sitios web, os códigos de produtos, os números de licenza ou os nomes que conteñen só letras teñen patróns que os fan válidos. Os patróns de validación personalizados permítenche definir exactamente que formato é aceptable, detectando erros antes do envío.

Nesta guía, aprenderás a engadir patróns de validación personalizados aos campos de texto dos teus formularios de WordPress.

Que son os patróns de validación?

O concepto

Os patróns de validación son regras que definen que entrada é válida:

  • "Debe conter só letras"
  • "Debe ser un URL válido"
  • "Debe coincidir co formato ABC-1234"
  • "Debe ter exactamente 10 caracteres"

Como funcionan

  1. Tipos de usuario no campo de texto
  2. Ao enviar (ou mentres escriben), a entrada compróbase co patrón
  3. Se coincide: A validación é axeitada
  4. Se non o fai: móstrase unha mensaxe de erro

Beneficios

  • Calidade dos datos: Asegurar formatos coherentes
  • Prevención de erros: Detecta os erros cedo
  • Guía para o usuario: Expectativas claras
  • Compatibilidade augas abaixo: Os datos funcionan con outros sistemas

Patróns de validación integrados

Creador automático de formularios inclúe patróns comúns:

patrón Valida Exemplo de entrada válida
email Formato de enderezo de correo electrónico [protexido por correo electrónico]
URL URLs de sitios web https://example.com
Só letras AZ, só AZ XoánSmith
Só números Só 0-9 12345
Alfanumérico Letras e números ABC123
Personalizado O teu propio patrón de expresión regular (depende do patrón)

Usando patróns integrados

Paso 1: Engadir un campo de texto

  1. Abre o teu formulario en A.F.B.
  2. Arrastrar Texto campo para formar
  3. Fai clic para configurar

Paso 2: Seleccionar o patrón de validación

  1. Buscar Patrón de validación na configuración
  2. Escolla do menú despregable:
    • Ningún (sen patrón)
    • email
    • URL
    • Só letras
    • Só números
    • Alfanumérico
    • Personalizado
  3. Gardar configuración

Paso 3: Validación da proba

  1. Formulario de vista previa
  2. Tenta unha entrada válida: debería pasar
  3. Tenta unha entrada non válida: debería mostrar un erro

Exemplos de patróns e casos de uso

Validación de URL

Use a:

  • Campo do sitio web
  • Ligazóns de carteira
  • Perfís de redes sociais
  • URL de referencia

Exemplos válidos:

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

Exemplos non válidos:

  • exemplo.com (falta o protocolo)
  • www.example.com (falta o protocolo)
  • só un pouco de texto

Só letras

Use a:

  • Nome/apelidos (validación simple)
  • Nomes de cidades
  • Códigos de país
  • Identificadores alfabéticos

Exemplos válidos:

  • John
  • Ferreiro
  • NewYork

Exemplos non válidos:

  • John123
  • Nova York (espazo)
  • O'Brien (apóstrofo)

Nota: Só letras é estrito. Ten en conta se necesitas espazos, guións ou acentos.

Só números

Use a:

  • números de identificación
  • Números de conta
  • Cantidade (cando non se usa o campo numérico)
  • códigos PIN

Exemplos válidos:

  • 12345
  • 00123
  • 9876543210

Exemplos non válidos:

  • 123-456 (guión)
  • 123.45 (decimais)
  • 12345A

Alfanumérico

Use a:

  • Códigos de produto
  • Números de referencia
  • Usuarios
  • Números de serie

Exemplos válidos:

  • ABC123
  • Usuario42
  • PROD001

Exemplos non válidos:

  • ABC-123 (guión)
  • ABC 123 (espazo)
  • ABC_123 (subliñado)

Patróns de validación personalizados (expresión regular)

Que é Regex?

As expresións regulares (regex) son patróns que describen formatos de texto:

  • ^ = Comezo da cadea
  • $ = Fin da cadea
  • [A-Z] = Calquera letra maiúscula
  • [a-z] = Calquera letra minúscula
  • [0-9] = Calquera díxito
  • {3} = Exactamente 3 dos anteriores
  • {2,5} = Entre 2 e 5 dos anteriores
  • + = Un ou máis
  • * = Cero ou máis
  • ? = Opcional (cero ou un)

Creación de patróns personalizados

  1. Selecciona "Personalizado" no menú despregable de validación
  2. Introduza o seu patrón de expresión regular
  3. Proba con varias entradas

Exemplos de patróns personalizados comúns

Código postal dos EUA

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

Valida:

  • 12345 (5 díxitos)
  • 12345-6789 (código postal+4)

Rexeita:

  • 1234 (demasiado curto)
  • 123456 (demasiado longo)
  • ABCDE (letras)

Número de teléfono dos EUA

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

Valida: 555-123-4567

Para 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 do produto (formato ABC-1234)

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

Valida:

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

Rexeita:

  • abc-1234 (minúsculas)
  • AB-1234 (só 2 letras)
  • ABC1234 (falta o guión)

Matrícula (varios formatos)

Patrón (xeral dos EUA): ^[A-Z0-9]{1,7}$

Valida: 1-7 maiúsculas/números

Tarxeta 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 pagamentos reais, use procesadores de pagamentos axeitados coa súa validación.

Nome de usuario (letras, números, guión baixo)

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

Regras:

  • Comeza coa letra
  • De 3 a 20 caracteres en total
  • Só letras, números, guións baixos

Valida: usuario_123, JohnDoe, test42

Código de cores hexadecimal

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

Valida:

  • # FF5733
  • #fff
  • #ABC123

Data (AAAA-MM-DD)

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

Valida: 2026-01-15

Nota: Para as datas, adoita ser mellor usar un campo de data cun selector de datas.

Hora (HH:MM, 24 horas)

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

Valida:

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

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

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

Valida:

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

Número da Seguridade Social (EE. UU.)

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

Valida: 123-45-6789

Atención: Ten coidado ao recoller os números da Seguridade Social: implicacións para a seguridade e a privacidade.

Construíndo os teus propios patróns

Proceso paso a paso

  1. Definir requisitos: Que formato necesitas?
  2. Descompón: Que personaxes, cantos, en que orde?
  3. Patrón de construción: Traducir a expresión regular
  4. Proba a fondo: Entradas válidas E non válidas
  5. Escribir a mensaxe de erro: Axudar aos usuarios a comprender o formato

Exemplo: ID de empregado

Requisito: 2 letras + 4 díxitos + 1 letra (por exemplo, AB1234C)

Reparto:

  • 2 letras maiúsculas: [A-Z]{2}
  • 4 díxitos: \d{4}
  • 1 letra maiúscula: [A-Z]
  • Nada antes nin despois: ^ $

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

Patróns de proba

Antes de usar en formulario:

  • Probar as entradas válidas (debería ser aprobada)
  • Probar entradas non válidas (debería fallar)
  • Casos límite de proba (límites, caracteres especiais)
  • Usa probadores de expresións regulares en liña para depurar

Mensaxes de erro para a validación

Mensaxes predeterminadas

  • "Introduza un valor válido"
  • "Este campo non é válido"

Mellores mensaxes personalizadas

Indica aos usuarios o formato esperado:

patrón Mellor mensaxe de erro
CEP "Introduza un código postal válido (por exemplo, 12345 ou 12345-6789)"
teléfono "Introduza o teléfono como 555-123-4567"
Código do produto "Formato: ABC-1234 (3 letras, guión, 4 números)"
Nome de usuario "O nome de usuario debe comezar por unha letra, de 3 a 20 caracteres, só letras/números/guión baixo"

Usando marcadores de posición e texto de axuda

Evita erros mostrando o formato por adiantado:

  • Marcador de posición: "ABC-1234"
  • Texto de axuda: "Introduza o código do seu produto (por exemplo, ABC-1234)"

Mellores Prácticas

1. Comeza Simple

Usa patróns integrados sempre que sexa posible. As expresións regulares personalizadas engaden complexidade.

2. Non valides en exceso

Os patróns excesivamente estritos frustran os usuarios:

  • Nomes con guións (Mary-Jane)
  • Nomes con apóstrofos (O'Brien)
  • Personaxes internacionais (José, Müller)

3. Mostrar o formato esperado

Dígalles sempre aos usuarios o que esperas:

  • Marcador de posición con exemplo
  • Texto de axuda que explica o formato
  • Borrar a mensaxe de erro

4. Casos límite de proba

  • Entrada baleira
  • Espazos ao principio/final
  • Personaxes especiais
  • Lonxitude máxima

5. Considere alternativas

Ás veces, outras estratexias son mellores:

  • Datas → Usar campo Data
  • Números → Usar o campo Número
  • Teléfono → Usar o campo Teléfono con formato
  • Opcións fixas → Usar menú despregable

Combinando con outras validacións

Patrón + Obrigatorio

  • O campo debe estar preenchido E coincidir co patrón
  • O baleiro falla "obrigatorio"
  • Patrón de erro de formato incorrecto

Patrón + Lonxitude mín./máx.

  • O patrón valida o formato
  • A lonxitude valida o tamaño
  • Ambos deben pasar

Patróns de resolución de problemas

Patrón non funciona

Comprobar:

  • A sintaxe é correcta (sen erros ortográficos)
  • Os caracteres especiais escaparon correctamente
  • Áncoras ^ e $ se é necesario

Rexeitamento de entrada válida

Comprobar:

  • O patrón pode ser demasiado estrito
  • Faltan caracteres válidos no patrón
  • Problemas de distinción de maiúsculas e minúsculas

Entrada non válida que se está a aceptar

Comprobar:

  • O patrón pode ser demasiado solto
  • Faltan áncoras (^ e $)
  • Proba con máis exemplos

Preguntas máis frecuentes

Podo combinar varios patróns?

Un único campo usa un patrón. Para unha validación complexa, combine os requisitos nunha expresión regular usando a alternancia (|) ou cree o patrón para que coincida con todos os requisitos.

Os patróns distinguen entre maiúsculas e minúsculas?

Por defecto, si. Usa [A-Z-Z] para que coincidan en ambos os casos ou engade un indicador que non distinga entre maiúsculas e minúsculas se é compatible.

Como permito espazos?

Engade \s á túa clase de personaxe: [A-Za-z\s] coincide con letras e espazos.

E que pasa cos personaxes internacionais?

O estándar [A-Za-z] non inclúe caracteres acentuados. Para nomes internacionais, considere unha validación máis flexible ou use \p{L} (se é compatible) para calquera letra.

Debería validar ao desenfocar ou enviar?

Ambos funcionan. Ao ser desenfocado (perder o foco) dá unha resposta máis rápida. Ao enviar, capta todo. Moitos formularios fan ambas as cousas.

Resumo

Engadindo patróns de validación personalizados:

  1. Escolle o tipo de patrón – Integrado ou personalizado
  2. Configurar patrón – Seleccionar ou introducir expresión regular
  3. Engadir marcador de posición – Mostrar o formato esperado
  4. Engadir texto de axuda – Explicar os requisitos
  5. Definir mensaxe de erro – Corrección da guía
  6. Proba a fondo – Entradas válidas e inválidas

Conclusión

Os patróns de validación personalizados garanten a calidade dos datos ao aplicar formatos específicos. Tanto se precisa validación de URL, códigos de produto ou identificadores personalizados, os patróns detectan erros antes do envío e guían aos usuarios para corrixir a entrada.

Creador automático de formularios Inclúe patróns comúns (correo electrónico, URL, letras, números, alfanuméricos) e admite expresións regulares personalizadas para necesidades de validación especializadas. Os datos limpos comezan cunha validación axeitada.

Listo para validar as entradas do formulario? Descargar o creador automático de formularios e asegúrate de que os teus formularios recollan datos co formato correcto.

Deixe unha resposta

Enderezo de correo electrónico non será publicado. Os campos obrigatorios están marcados *