Pular para o conteúdo principal

Máscara

Uma máscara funciona como um "molde" visual que guia o usuário durante a digitação, aplicando automaticamente pontuações, símbolos e formatações específicas sem que seja necessário digitá-los manualmente. O sistema utiliza a biblioteca IMask para processar as transformações em tempo real, garantindo que os dados sejam sempre inseridos no formato correto.

Principais Benefícios​

  • Padronização: Garante que todos os dados sejam inseridos seguindo o mesmo padrão
  • Experiência do usuário: Facilita a digitação ao aplicar formatação automática
  • Validação: Previne erros de formato durante a entrada de dados
  • Eficiência: Reduz a necessidade de validações posteriores

Como Configurar uma Máscara​

01. No aplicativo Surface, acesse a opção expressão regular no menu:

mascara

02. Em seguida, clique no ícone de + para criar uma nova expressão:

mascara

03. Selecione a empresa:

mascara

04. Selecione o aplicativo Arranger:

mascara

05. Defina um nome e digite a máscara que deseja aplicar:

mascara

Quando Usar o Padrão Padrão​

Use o padrão padrão quando:

  • A máscara é complexa ou contém máscaras aninhadas
  • A máscara tem tamanho fixo (símbolos opcionais podem fornecer alguma flexibilidade)
  • Espaço reservado (placeholder) é necessário
  • É necessária mais confiabilidade ou flexibilidade no processamento de entrada
  • Precisa de controle avançado sobre caracteres especiais

Definições de Caracteres​

SímboloDescriçãoExemplo
0Qualquer dígito (0-9)000 → 123
AQualquer letra (a-z, A-Z)AAA → ABC
*Qualquer caractere*** → A1b
[]Torna a entrada opcional[000] → pode ser vazio ou 123
{}Inclui parte fixa no valor não mascarado{#}000 → valor final inclui #
`Evita que os símbolos voltem`000 → caracteres não retornam
\\Escapa caracteres especiais\\0 → 0 literal

Exemplo Detalhado​

Máscara: {#}000[aaa]/DIG-*[**]

Explicação da máscara:

  • {#} - Símbolo fixo "#" incluído no valor final
  • 000 - Três dígitos obrigatórios
  • [aaa] - Três letras opcionais
  • /DIG- - Texto fixo literal
  • * - Um caractere obrigatório qualquer
  • [**] - Dois caracteres opcionais quaisquer

Possíveis saídas:

  • #145/DIG-6 (sem caracteres opcionais)
  • #145abc/DIG-645 (com letras opcionais)
  • #854abc/DIG-541 (completo)

Exemplos Práticos Comuns​

Telefone​

Máscara: (00) 00000-0000 Resultado: (11) 98765-4321

CPF​

Máscara: 000.000.000-00 Resultado: 123.456.789-00

CEP​

Máscara: 00000-000 Resultado: 01234-567

CNPJ​

Máscara: 00.000.000/0000-00 Resultado: 12.345.678/0001-90

Data​

Máscara: 00/00/0000 Resultado: 25/12/2024

Placa de Veículo (Mercosul)​

Máscara: AAA0A00 Resultado: BRA2E19

Dicas Importantes​

  1. Teste sempre a máscara antes de implementar em produção
  2. Considere casos extremos como valores mínimos e máximos
  3. Documente as máscaras criadas para facilitar manutenção futura
  4. Use nomes descritivos ao criar as expressões regulares
  5. Valide se a máscara atende a todos os formatos possíveis do campo

Solução de problemas​

Problemas Comuns​

Máscara não aplica formatação:

  • Verifique se a sintaxe está correta
  • Confirme se os caracteres especiais estão escapados quando necessário

Caracteres não aceitos:

  • Revise as definições de caracteres (0, A, *)
  • Verifique se há conflitos com caracteres fixos

Valor não salva corretamente:

  • Confirme o uso correto de {} para incluir caracteres no valor final
  • Teste o comportamento com campos opcionais []

Documentação Adicional​

Para informações mais avançadas e exemplos adicionais, consulte a documentação completa da biblioteca IMask: https://imask.js.org/guide.html#overwrite