16 de novembro
Código fonte
21 visualizações

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

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 RegExp. Isso vai elevar sua habilidade de programação e tornar seus códigos mais enxutos e eficientes.

REGEXP… nome estranho, dá medo mesmo. Eu tinha muito medo, e hoje me pergunto porque esperei quatro anos pra parar e realmente entender a razão porque existe e sua utilidade. Um dia eu cansei de enrolar e resolvi pegar realmente. É possível dominar RegExp em uma semana ou menos.

Expressões regulares estão presentes no nosso sofware, ainda que não as vejamos, as funções que chamamos acabam passando por filtros RegExp 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.

Não dá pra simplificar a explicação, mas o 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.

Vai lá no RegexOne e aprende RegExp

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 onChange de cada campo desejado. Ela formata o valor digitado cada vez que ele é atualizado.

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: Simples. Identifique a string que termine com dois caractéres ($). Insira uma vírgula logo antes.

/(\d)(?=(\d{3})+(?!\d))/g

Explicação: 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.

Criamos então a validação. Queremos a precisão de dois números após a vírgula, que é nosso padrão brasileiro. Retorne true se validar. Caso contrário, retorne false.

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);
}

Repare a utilização de .replace na máscara e .test na validação.

Um pouco sobre o autor

Matteus Barbosa - Desenvolvedor Web
Trabalho como Desenvolvedor web, no regime MEI PJ (Pessoa Jurídica) seguindo preceitos da legalidade. Para saber da minha experiência, acesse meu Currículo, meu Portfólio, a relação de Referências de Clientes ou ainda a Lista de Serviços. As propostas de serviço são iniciadas com conversas informais, seguidas da coleta de requisitos, elaboração do cronograma e por fim a proposta de orçamento. Todas as etapas são acompanhados de perto via ferramenta online e videoconferências. Os pagamentos são registrados com entrega de notas fiscais. Presto serviços de projeto, desenvolvimento e manutenção de sistemas baseados nos mais diversos frameworks.