Formatando CPF com ajuda das Expressões Regulares

Para começar a fazer vendas online, uma empresa que fabrica adesivos criou uma página para pré cadastro de cartão de crédito que contém campos como nome, idade, endereço, CPF entre outros.

O problema é que alguns cadastros não possuem um formato de CPF válido, isso porque o campo não possui nenhuma validação. Ou seja, o campo está aceitando não só números como letras e outros tipos de caractere.

O que vamos fazer é encontrar uma maneira de ajudar o usuário de forma mais clara possível a preencher o cadastro e garantir a validação no front-end antes que os dados sejam enviados para o back-end.

Fazendo verificação do campo com a ajuda do pattern

Atualmente nós temos o seguinte HTML para o preenchimento do CPF:

<label for="cpf">CPF</label>
<input id="cpf" type="text" placeholder="insira seu CPF">
<input id="btn-enviar" type="submit" value="enviar">

Como podemos notar não temos nenhuma validação, então fica confuso se devemos ou não colocar ponto ou traço no CPF e pode acontecer do usuário colocar outros caracteres no campo sem querer.

Para isso evitar que isso ocorra vamos usar o atributo pattern do HTML5 que nos permite fazer uso das famosas expressões regulares que nada mais são que padrões utilizados para selecionar caracteres em uma string.

Na nossa verificação vamos usar a lista [0-9], esse padrão indica que queremos os números de 0 até 9 e o intervalo {11}, indicando que temos que ter um número de 11 dígitos no nosso campo.

Com a adição do pattern nosso campo de CPF ficou da seguinte maneira:

<input id="cpf" type="text" placeholder="insira seu CPF (somente números)" pattern="[0-9]{11}">
<input id="btn-enviar" type="submit" value="enviar">

Com a ajuda do pattern e das expressões regulares conseguimos resolver uma parte da tarefa, agora o que precisamos fazer encontrar uma maneira de formatar o CPF no padrão que precisamos enviar ao back-end.

Mais um pouco de Regex

Para começar vamos criar uma função que vai ser responsável por formatar o CPF. Dentro dessa função vamos ter as variáveis :

• elementoAlvo: responsável pelo parâmetro que vai ser passado na função
• cpfAtual: responsável por capturar os números do CPF digitados
• cpfAtualizado: responsável por receber o CPF formatado.

function formataCPF(cpf) {
const elementoAlvo = cpf
const cpfAtual = cpf.value   
let cpfAtualizado;
}

Vamos usar os seguintes recursos das expressões regulares para formatar o CPF:

• O repetidor { n } seu papel é repetir um item quantas vezes que forem preciso.
• O Grupo ( ) seu papel é agrupar itens.
• \d que representa o match com todos os números de 0 - 9.

Baseado no padrão normalmente usado para o CPF, nossa expressão ficou assim /(\d{3})(\d{3})(\d{3})(\d{2})/, ou seja, três grupos que recebem três números cada e um grupo que recebe dois números.

Como já o que já temos nossa expressão, o que vamos fazer agora é utilizar o método replace que vai receber dois parâmetros.

O primeiro vai retornar uma nova string no padrão da nossa expressão regular e o segundo recebe uma função que vai concatenar os pontos e o traço com os essa string. Por fim a variável elementoAlvo recebe o CPF formatado.

function formataCPF(cpf) {
const elementoAlvo = cpf
const cpfAtual = cpf.value   
let cpfAtualizado;
cpfAtualizado = cpfAtual.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, 
 function( regex, argumento1, argumento2, argumento3, argumento4 ) {
        return argumento1 + '.' + argumento2 + '.' + argumento3 + '-' + argumento4;
})  
elementoAlvo.value = cpfAtualizado; 
}    

Por fim adicionamos o evento blur no nosso input para quando o campo de CPF perder o foco, a função formataCPF ser ativada.

<input id="cpf" type="text" placeholder="insira seu CPF (somente números)" onblur="formataCPF(this)" pattern="[0-9]{11}">
<input id="btn-enviar" type="submit" value="enviar">

Já temos nossa verificação e padronização, agora vamos pensar um pouco no usuário. Seria interessante o usuário receber um aviso de erro customizado caso digite o número errado no campo.

Ajudando o usuário a ser mais feliz =)

A API do JavaScript nos fornece algumas propriedades para trabalhar com validação, para o nosso caso vamos usar:

• validity: responsável por retornar um valor verdadeiro ou falso.
• patternMismatch: responsável por verificar o pattern.
• setCustomValidity: responsável por personalizar a resposta para o usuário.

Vamos usar o eventListener para que toda vez que clicarmos no botão de enviar aconteça uma verificação.

Caso patterMismatch não corresponda ao padrão que definimos no pattern no input, vamos mandar uma resposta customizada para o usuário e desabilitar o botão de envio para que ele saiba que algo de errado aconteceu, caso contrário o número é enviado sem problemas.

const cpf = document.querySelector("cpf");
cpf.addEventListener("input", function(event){
 if (cpf.validity.patternMismatch) {
   cpf.setCustomValidity("Deveria ter apenas números aqui =) ");
   btnEnviar.disabled = true;
   } else {
     cpf.setCustomValidity("");
     btnEnviar.disabled = false;
   }
 })
}

Não vamos abordar nesse post a maneira de fazer o cálculo para saber se o CPF é válido ou não, felizmente o próprio ministério da fazenda nos disponibiliza o algoritmo para lidar com essa situação.

Se ficou interessado em como funciona regex, e quais os casos onde podemos utilizá-las melhor, aqui na Alura temos um curso de expressões regulares. Nele, você verá como expressões regulares, dentre outras muitas coisas.