Padrões de validação personalizados para campos de texto

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

  1. O usuário digita no campo de texto.
  2. Ao enviar o formulário (ou enquanto digitam), a entrada é verificada em relação ao padrão.
  3. Se houver correspondência: Validação aprovada
  4. 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
E-mail 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

  1. Abra o seu formulário em A.F.B.
  2. Arraste Texto campo para formar
  3. Clique para configurar

Etapa 2: Selecione o padrão de validação

  1. Encontre Padrão de Validação nas configurações
  2. Selecione no menu suspenso:
    • Nenhum (sem padrão)
    • E-mail
    • URL
    • Somente cartas
    • Apenas números
    • Alfanumérico
    • Molduras por Medida
  3. Salvar configurações

Etapa 3: Validação de Testes

  1. Formulário de visualização
  2. Tente inserir dados válidos — deve passar.
  3. 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

  1. Selecione “Personalizado” no menu suspenso de validação.
  2. Insira seu padrão de expressão regular.
  3. 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

  1. Definir requisitos: Qual formato você precisa?
  2. Divida-o: Quais personagens, quantos e em que ordem?
  3. Padrão de construção: Traduzir para expressão regular
  4. Teste completamente: Entradas válidas E inválidas
  5. 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:

  1. Escolha o tipo de padrão – Integrado ou personalizado
  2. Configurar padrão – Selecione ou insira uma expressão regular
  3. Adicionar espaço reservado – Mostrar o formato esperado
  4. Adicionar texto de ajuda – Explicar os requisitos
  5. Definir mensagem de erro – Correção do guia
  6. 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.

Deixa um comentário

O seu endereço de e-mail não será publicado. Os campos obrigatórios são marcados com *