Padrões de validação personalizados para campos de texto
A campo de texto Aceita qualquer coisa que os usuários digitem, mas às vezes você precisa de formatos específicos. URLs de sites, códigos de produtos, números de licença ou nomes compostos apenas por letras têm padrões que os tornam válidos. Os padrões de validação personalizados permitem que você defina exatamente qual formato é aceitável, detectando erros antes do envio.
Neste guia, você aprenderá como adicionar padrões de validação personalizados aos campos de texto em seus formulários do WordPress.
O que são padrões de validação?
O conceito
Os padrões de validação são regras que definem o que é uma entrada válida:
- “Deve conter apenas letras”
- “Deve ser um URL válido”
- “Deve corresponder ao formato ABC-1234”
- “Deve ter exatamente 10 caracteres”
Como Funcionam
- O usuário digita no campo de texto.
- Ao enviar o formulário (ou enquanto digitam), a entrada é verificada em relação ao padrão.
- Se houver correspondência: Validação aprovada
- Caso contrário: Mensagem de erro exibida
Benefícios
- Qualidade dos dados: Garantir formatos consistentes
- Prevenção de erros: Detecte erros cedo
- Guia do usuário: Expectativas claras
- Compatibilidade com versões posteriores: Os dados funcionam com outros sistemas.
Padrões de Validação Integrados
Construtor automático de formulários Inclui padrões comuns:
| padrão | Valida | Exemplo de entrada válida |
|---|---|---|
| Formato de endereço de e-mail | [email protected] | |
| URL | URLs de sites | https://example.com |
| Somente cartas | AZ, somente para o Arizona | Johnsmith |
| Apenas números | Somente 0-9 | 12345 |
| Alfanumérico | Letras e números | ABC123 |
| Molduras por Medida | Seu próprio padrão de expressão regular | (depende do padrão) |
Utilizando padrões predefinidos
Passo 1: Adicionar Campo de Texto
- Abra o seu formulário em A.F.B.
- Arraste Texto campo para formar
- Clique para configurar
Etapa 2: Selecione o padrão de validação
- Encontre Padrão de Validação nas configurações
- Selecione no menu suspenso:
- Nenhum (sem padrão)
- URL
- Somente cartas
- Apenas números
- Alfanumérico
- Molduras por Medida
- Salvar configurações
Etapa 3: Validação de Testes
- Formulário de visualização
- Tente inserir dados válidos — deve passar.
- Tente uma entrada inválida — deve mostrar um erro.
Exemplos de padrões e casos de uso
Validação de URL
Use para:
- Campo do site
- Links para o portfólio
- Perfis de mídia social
- URLs de referência
Exemplos válidos:
- https://example.com
- http://www.example.com/page
- https://example.com/path?query=value
Exemplos inválidos:
- exemplo.com (protocolo ausente)
- www.example.com (protocolo ausente)
- apenas um texto
Somente cartas
Use para:
- Nome e sobrenome (validação simples)
- Nomes de cidades
- Códigos de país
- Identificadores alfabéticos
Exemplos válidos:
- banheiro
- Smith
- NewYork
Exemplos inválidos:
- John123
- Nova Iorque (espaço)
- O'Brien (apóstrofo)
Observação: A formatação deve ser estritamente alfabética. Considere se você precisa de espaços, hífens ou acentos.
Apenas números
Use para:
- Números de identificação
- Números de conta
- Quantidade (quando não se utiliza um campo numérico)
- Códigos PIN
Exemplos válidos:
- 12345
- 00123
- 9876543210
Exemplos inválidos:
- 123-456 (hífen)
- 123.45 (decimal)
- 12345
Alfanumérico
Use para:
- Códigos de produto
- Números de referência
- Nomes de usuário
- Números de série
Exemplos válidos:
- ABC123
- User42
- PROD001
Exemplos inválidos:
- ABC-123 (hífen)
- ABC 123 (espaço)
- ABC_123 (sublinhado)
Padrões de Validação Personalizados (Regex)
O que é Regex?
Expressões regulares (regex) são padrões que descrevem formatos de texto:
^= Início da string$= Fim da string[A-Z]= Qualquer letra maiúscula[a-z]= Qualquer letra minúscula[0-9]= Qualquer dígito{3}= Exatamente 3 dos anteriores{2,5}= Entre 2 e 5 dos anteriores+= Um ou mais*= Zero ou mais?= Opcional (zero ou um)
Criação de padrões personalizados
- Selecione “Personalizado” no menu suspenso de validação.
- Insira seu padrão de expressão regular.
- Teste com várias entradas
Exemplos comuns de padrões personalizados
Código postal dos EUA
Padrão: ^\d{5}(-\d{4})?$
Valida:
- 12345 (5 dígitos)
- 12345-6789 (CEP+4)
Rejeições:
- 1234 (muito curto)
- 123456 (muito longo)
- ABCDE (letras)
Número de telefone dos EUA
Padrão: ^\d{3}-\d{3}-\d{4}$
Valida: 555-123-4567
Para um formato flexível: ^\(?\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)
Padrão: ^[A-Z]{3}-\d{4}$
Valida:
- ABC-1234
- XYZ-9999
- PRO-0001
Rejeições:
- abc-1234 (minúsculas)
- AB-1234 (apenas 2 letras)
- ABC1234 (hífen ausente)
Placa de Licença (Vários Formatos)
Padrão (geral dos EUA): ^[A-Z0-9]{1,7}$
Valida: 1-7 letras maiúsculas/números
Cartão de Crédito (Formato Básico)
Padrão: ^\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}$
Valida:
- 1234567890123456
- 1234 5678 9012 3456
- 1234-5678-9012-3456
Observação: Para efetuar pagamentos, utilize processadores de pagamento adequados e com a devida validação.
Nome de usuário (Letras, Números, Sublinhado)
Padrão: ^[a-zA-Z][a-zA-Z0-9_]{2,19}$
Regras:
- Começa com a letra
- 3 a 20 caracteres no total
- Apenas letras, números e sublinhado.
Valida: usuário_123, JohnDoe, teste42
Código de cores hexadecimais
Padrão: ^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$
Valida:
- # FF5733
- #fff
- #ABC123
Data (AAAA-MM-DD)
Padrão: ^\d{4}-\d{2}-\d{2}$
Valida: 2026-01-15
Observação: Para datas, usar um campo de data com um seletor de datas geralmente é melhor.
Hora (HH:MM 24 horas)
Padrão: ^([01]\d|2[0-3]):[0-5]\d$
Valida:
- 09:30
- 14:45
- 23:59
Número da fatura (INV-AAAA-NNNN)
Padrão: ^INV-\d{4}-\d{4}$
Valida:
- INV-2026-0001
- INV-2025-1234
Número de Segurança Social (EUA)
Padrão: ^\d{3}-\d{2}-\d{4}$
Valida: 123-45-6789
Atenção: Tenha cuidado ao coletar números de segurança social (SSNs) — implicações de segurança e privacidade.
Criando seus próprios padrões
Processo passo a passo
- Definir requisitos: Qual formato você precisa?
- Divida-o: Quais personagens, quantos e em que ordem?
- Padrão de construção: Traduzir para expressão regular
- Teste completamente: Entradas válidas E inválidas
- Escreva a mensagem de erro: Ajudar os usuários a entender o formato
Exemplo: ID do funcionário
Requisito: 2 letras + 4 dígitos + 1 letra (ex: AB1234C)
Demolir:
- 2 letras maiúsculas:
[A-Z]{2} - 4 dígitos:
\d{4} - 1 letra maiúscula:
[A-Z] - Nada antes ou depois:
^e$
Padrão final: ^[A-Z]{2}\d{4}[A-Z]$
Padrões de teste
Antes de usar no formulário:
- Testar entradas válidas (deve passar)
- Testar entradas inválidas (deveria falhar)
- Teste casos extremos (limites, caracteres especiais)
- Use ferramentas online de teste de expressões regulares para depurar.
Mensagens de erro para validação
Mensagens padrão
- Por favor, insira um valor válido.
- “Este campo é inválido”
Mensagens personalizadas melhores
Informe aos usuários o formato esperado:
| padrão | Melhor mensagem de erro |
|---|---|
| CEP | “Por favor, insira um código postal válido (ex.: 12345 ou 12345-6789)” |
| Phone | Por favor, digite o número de telefone 555-123-4567. |
| Código Do Produto | “Formato: ABC-1234 (3 letras, hífen, 4 números)” |
| Nome de Utilizador | “O nome de usuário deve começar com uma letra, ter de 3 a 20 caracteres e conter apenas letras, números e sublinhados.” |
Utilizando texto de exemplo e texto de ajuda
Evite erros exibindo o formato antecipadamente:
- Marcador de posição: “ABC-1234”
- Texto de ajuda: “Digite o código do seu produto (ex.: ABC-1234)”
Melhores Práticas
1. Comece simples
Use padrões predefinidos sempre que possível. Expressões regulares personalizadas aumentam a complexidade.
2. Não valide em excesso
Padrões excessivamente rígidos frustram os usuários:
- Nomes com hífen (Mary-Jane)
- Nomes com apóstrofos (O'Brien)
- Personagens internacionais (José, Müller)
3. Exibir o formato esperado
Sempre diga aos usuários o que você espera:
- Espaço reservado com exemplo
- Texto de ajuda explicando o formato
- Limpar mensagem de erro
4. Teste de casos extremos
- Entrada vazia
- Espaços no início/fim
- Caracteres especiais
- Comprimento máximo
5. Considere alternativas
Por vezes, outras abordagens são mais adequadas:
- Datas → Usar campo de data
- Números → Usar campo Número
- Telefone → Usar o campo Telefone com o formato especificado.
- Opções fixas → Usar menu suspenso
Combinando com outras validações
Padrão + Obrigatório
- O campo deve ser preenchido E corresponder ao padrão.
- Vazio falha “requisito”
- Formato incorreto falha no padrão
Padrão + Comprimento Mínimo/Máximo
- O padrão valida o formato.
- O comprimento valida o tamanho.
- Ambos devem passar
Padrões de solução de problemas
Padrão não funciona
Verifica:
- A sintaxe está correta (sem erros de digitação).
- Os caracteres especiais escaparam corretamente.
- ^ e $ âncoras, se necessário
Entrada válida sendo rejeitada
Verifica:
- O padrão pode ser muito rígido.
- Caracteres válidos ausentes no padrão
- Problemas de diferenciação entre maiúsculas e minúsculas
Entrada inválida sendo aceita
Verifica:
- O padrão pode estar muito frouxo.
- Âncoras ausentes (^ e $)
- Teste com mais exemplos
Perguntas frequentes
Posso combinar vários padrões?
Um único campo usa um padrão. Para validação complexa, combine os requisitos em uma única expressão regular usando alternância (|) ou crie o padrão para corresponder a todos os requisitos.
Os padrões diferenciam maiúsculas de minúsculas?
Por padrão, sim. Use [A-Za-z] para corresponder a ambos os casos, ou adicione o sinalizador de não distinção entre maiúsculas e minúsculas, se compatível.
Como faço para adicionar espaços?
Adicione \s à sua classe de caracteres: [A-Za-z\s] corresponde a letras e espaços.
E quanto aos personagens internacionais?
O formato padrão [A-Za-z] não inclui caracteres acentuados. Para nomes internacionais, considere uma validação menos rigorosa ou use \p{L} (se compatível) para qualquer letra.
Devo validar ao desfocar ou ao enviar?
Ambas as opções funcionam. Ao perder o foco, o feedback é mais rápido. Ao enviar o formulário, tudo é detectado. Muitos formulários fazem as duas coisas.
Resumo
Adicionando padrões de validação personalizados:
- Escolha o tipo de padrão – Integrado ou personalizado
- Configurar padrão – Selecione ou insira uma expressão regular
- Adicionar espaço reservado – Mostrar o formato esperado
- Adicionar texto de ajuda – Explicar os requisitos
- Definir mensagem de erro – Correção do guia
- Teste completamente – Entradas válidas e inválidas
Conclusão
Os padrões de validação personalizados garantem a qualidade dos dados ao impor formatos específicos. Seja para validação de URLs, códigos de produtos ou identificadores personalizados, os padrões detectam erros antes do envio e orientam os usuários para a entrada correta dos dados.
Construtor automático de formulários Inclui padrões comuns (e-mail, URL, letras, números, alfanumérico) e suporta expressões regulares personalizadas para necessidades de validação específicas. Dados limpos começam com a validação adequada.
Pronto para validar os dados inseridos no seu formulário? Baixe o Construtor Automático de Formulários e assegure-se de que seus formulários coletem dados formatados corretamente.