Validação e Máscara Decimal usando Expressões Regulares

Utilizamos Expressões Regulares para encontrar padrões em textos e então poder operar sobre esses padrões encontrados, substituindo partes do texto, por exemplo.

Você fala inglês? Aprendeu por conta ou fez um curso? Assim como você entendeu a necessidade do inglês na programação, também precisa dominar expressões regulares. Isso vai elevar sua habilidade de programação e tornar seus códigos mais enxutos e eficientes.

Expressões Regulares estão presentes desde o baixo nível de software, ainda que não as vejamos, as funções que chamamos acabam passando por filtros de expressão regular na fase onde o código é transformado para algo mais próximo da linguagem de máquina, seja qual for sua linguagem de programação.

Esses são os componentes mais usados em uma expressão regular:

. – qualquer caractér naquela posição
? – o caractér anterior é opcional ? – sinaliza um procurador preguiçoso
[abc] – permite apenas um dos caractéres declarados a, b ou c
[^abc] – qualquer coisa menos esses três caractéres
[a-z] – demarcam espaço para letras
[0-9](ou \d) – demarcam espaço para númerais
[^0-9](ou \D) – demarcam espaço para não-numerais
\w ou \W – Word (Palavra), ou não
\s ou \S – espaço, ou não
+ – repete o caractér anterior, ou o set de regex uma ou mais vezes
* – repete o caractér anterior zero ou mais vezes
{x} – número exato de repetições
{x,y} – para variar o número de repetições
() – grupos : coletam o texto encontrado pelos padrões definidos dentro de seu campo. Os grupos podem ser referenciados por número de índice posteriormente, $1, $2 …

Um listener de eventos como onChange deve ser usado para aplicar as funções mask_decimal( event.target ) e validate_decimal( event.target ) como veremos a seguir.

Vejamos um exemplo prático em JavaScript (ECMA Script) de máscara e validação para números decimais, ambos usando RegExp. A seguinte função pode ser aplicada no evento onChange de cada campo desejado. É uma função que formata o valor digitado cada vez que ele é modificado.

...
<script src="./mask_decimal.js"></script>
<input type="text" onchange="mask_decimal(this)">
...

export function mask_decimal(input){
    if(typeof input === "undefined" || input == null)
    return 0;
  
    let valor = '';
  
    if(typeof input.value !== "undefined"){
      valor = input.value;
    } else {
      valor = input;
    }
  
    if(valor.length == 2)
    return valor;
  
     let v = valor;
     v = v.replace(/\D/g, '');
     v = v.replace(/(\d{1,2})$/, ',$1');
     v = v.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.');
   return v;
  }

v.replace(/(\d{1,2})$/, ',$1');

Explicação do código acima: Identifique a string que termine com dois caractéres ($). Insira uma vírgula logo antes.

v.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.');

Explicação do código acima: Retorne pra mim, todas as ocorrências na string fornecida. Quero qualquer ocorrência de um único número, seguido de três números exatamente, sem outros números após. Isso é necessário para pegar as unidades de milhar.

export function validate_decimal(input){

  if(typeof input == "undefined" || input == null)
  return 0;

  let valor = '';

  if(typeof input.value !== "undefined"){
    valor = input.value;
  } else {
    valor = input;
  }

  if(valor.length == 2){
    return true;
  }

  var re = /(\d{1,3}\.)*([\d]{2,3}\,)*(\d{2})/;

return re.test(valor);
}

Explicação do código acima: Repare a utilização de .replace na máscara e .test na validação.

Ferramentas web úteis para testes

RegexOne é um site bolado pra você pegar as manhas e entender de vez cada caractér quando ver uma expressão regular da próxima vez. Você também vai passar a escrever suas próprias expressões com tanta facilidade quanto programa sua linguagem.

Teste & debug para PHP, Python e Javascript

Uma segunda opção, também muito boa, com exemplos

Conclusão

Percebemos que existem verificações para saber se o valor está vazio e também percebemos aplicações consecutivas de diferentes padrões RegExp, como vimos nos .replace consecutivos sobre o mesmo valor. O que é retornado, fica visível novamente no campo em questão de milissegundos, criando a validação e a máscara em tempo real.

via CHAT ou WhatsApp

Inscrever-se

Login

Notify of

new follow-up comments new replies to my comments

Label

{} [+]

Nome*

Email*

Label

{} [+]

Nome*

Email*

1 Comentário

Mais antigos

Mais recentes Mais votados

Inline Feedbacks

View all comments

Kaique

2 anos atrás

Cara valeu mesmo, foi o único que encontrei que conseguiu resolver o meu problema

3