Como fazer um validador de CPF em Tyepscript

É comum que um programador se depare, mais cedo ou mais tarde, com um problema onde terá que fazer uma validação de CPF (Cadastro de Pessoa Física) ou CNPJ (Cadastro Nacional de Pessoa Jurídica), seja no trabalho ou na faculdade. Apesar de parecer um problema complexo, a validação é feita com base em um cálculo matemático, e pode ser replicada em qualquer linguagem de programação sem muitas dificuldades. Há pouco tempo atrás, tive que implementar um validador de CPF e CNJP na empresa em que trabalho, utilizando Ionic e Typescript. E, neste mês, também me deparei com o mesmo problema durante uma aula da faculdade, mas em linguagem C. Hoje trarei a solução de como fazer um validador de CPF para Typescript e Ionic, que pode ser utilizado tanto para aplicações PWA, Web ou Mobile. No próximo artigo, trarei a solução de como implementar um validador de CNPJ, que possui lógica bem similar.

Antes de exibir o código, farei uma breve explicação sobre como funciona esta fórmula matemática para validação do CPF. A fórmula para validar um número de CPF é conhecida por “módulo 11”, que consiste em gerar um número multiplicando cada dígito por um fator de acordo com a sua posição. Depois, é realizado uma divisão por 11 e é gerado o dígito verificador baseado em uma regra usando o resto da divisão. Os dois últimos números do CPF são os dígitos verificadores, cada um deles é calculado utilizando esta regra, mas com fatores distintos. O cálculo do primeiro dígito leva em conta os nove primeiros números do CPF, o cálculo do segundo dígito leva em consideração os nove primeiros números novamente e mais o primeiro dígito verificador. Mas não vou entrar em muitas detalhes e demonstrações matemáticas aqui.

Apenas como curiosidade, é possível saber o estado de origem do CPF da pessoa apenas verificando o número do mesmo, pois o nono algarismo do CPF representa o estado de origem. Por exemplo, considerando o CPF 123.456.789–00, o nono algarismo é o 9, indicando que a origem do CPF é do estado do Paraná ou Santa Catarina. Para saber qual o estado de origem de um determinado CPF, é utilizada a seguinte lista: 1. Distrito Federal, Goiás, Mato Grosso do Sul e Tocantins; 2. Pará, Amazonas, Acre, Amapá, Rondônia e Roraima; 3. Ceará, Maranhão e Piauí; 4. Pernambuco, Rio Grande do Norte, Paraíba e Alagoas; 5. Bahia e Sergipe; 6. Minas Gerais; 7. Rio de Janeiro e Espírito Santo; 8. São Paulo; 9. Paraná e Santa Catarina; 0. Rio Grande do Sul. Segue então o código comentado de validação de CPF em Typescript.

Código HTML

<ion-header>
  <ion-toolbar color="tertiary">
    <div class="headerTittle">
      <h1>CPF na Nota</h1>
    </div>
  </ion-toolbar>
  <ion-toolbar>
    <!-- Botão que ativará a função para testar o CPF -->
    <div class="headerButton" (click)="testaCPF()">
      Inserir CPF
    </div>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!--Neste campo, o usuário irá inserir o CPF, que será guardado  na variável cpf-->
  <ion-input class="cpf" placeholder="Insira o CPF" name="cpf" type="text" [(ngModel)]="cpf"></ion-input>
</ion-content>

Código em typescript, com Ionic

import { Component } from '@angular/core';
import { ModalController, AlertController, NavParams } from '@ionic/angular';

@Component({
  selector: 'nota-fiscal',
  templateUrl: './nota-fiscal.component.html',
  styleUrls: ['./nota-fiscal.component.scss'],
})

export class NotaFiscalComponent {

  cpf: any;
  strCPF: any;

  constructor(
    private modalController: ModalController,
    public globalS: GlobalService,
    private alertController: AlertController,
  ) { }

  //Exibe uma mensagem de alerta ao usuário, caso o número do CPF seja inválido
  async myDismiss() {
    this.cpf = null;
    await this.modalController.dismiss(this.cpf);
  }

  //Função que irá testar se o CPF é valido 
  testaCPF() {
    var Soma = 0;
    // Verifica se a variável cpf é igual a "undefined", exibindo uma msg de erro
    if (this.cpf === undefined) {
      this.cpfAlert();
      return false;
    }

    // Esta função retira os caracteres . e - da string do cpf, deixando apenas os números 
    var strCPF = this.cpf.replace('.', '').replace('.', '').replace('-', '');
    // Testa as sequencias que possuem todos os dígitos iguais e, se o cpf não tem 11 dígitos, retorna falso e exibe uma msg de erro
    if (strCPF === '00000000000' || strCPF === '11111111111' || strCPF === '22222222222' || strCPF === '33333333333' || 
    strCPF === '44444444444' || strCPF === '55555555555' || strCPF === '66666666666' || strCPF === '77777777777' || strCPF === '88888888888' || 
    strCPF === '99999999999' || strCPF.length !== 11) {
      this.cpfAlert();
      return false;
    }

    // Os seis blocos seguintes de funções vão realizar a validação do CPF propriamente dito, conferindo se o DV bate. Caso alguma das funções não consiga verificar
    // o DV corretamente, mostrará uma mensagem de erro ao usuário e retornará falso, para que o usário posso digitar novamente um número para ser testado

    //Multiplica cada digito por numeros de 1 a 9, soma-os e multiplica-os por 10. Depois, divide o resultado encontrado por 11 para encontrar o resto
    for (let i = 1; i <= 9; i++) {
      Soma = Soma + parseInt(strCPF.substring(i - 1, i)) * (11 - i);
    }

    var Resto = (Soma * 10) % 11;
    if ((Resto === 10) || (Resto === 11)) {
      Resto = 0;
    }

    if (Resto !== parseInt(strCPF.substring(9, 10))) {
      this.cpfAlert();
      return false;
    }

    Soma = 0;
    for (let k = 1; k <= 10; k++) {
      Soma = Soma + parseInt(strCPF.substring(k - 1, k)) * (12 - k)
    }

    Resto = (Soma * 10) % 11;
    if ((Resto === 10) || (Resto === 11)) {
      Resto = 0;
    }

    if (Resto !== parseInt(strCPF.substring(10, 11))) {
      this.cpfAlert();
      return false;
    }

    //a função this.update() será chamada, caso a validação do Dígito Verificador seja feita com sucesso
    this.update();
    return true;
  }
    //Caso o CPF será valido, irá realizar a gravação do mesmo na variável strCPF
  async update() {
    await this.modalController.dismiss(this.strCPF);
  }

  async cpfAlert() {
    const alert = await this.alertController.create({
      header: 'CPF Inválido!',
      message: 'Digite um número de CPF válido para prosseguir',
      buttons: ['OK']
    });
    await alert.present();
  }
}

Blog

Como fazer um validador de CPF em Tyepscript

Guilherme Manzano

Join Our Newsletter. No Spam, Only the good stuff.

Related