CPF and CNPJ generator with JavaScript

[Clique aqui para ler em português]

When we are going to make a registration system at some point we end up needing a CPF or CNPJ number to validate the data, and today we have several tools that generate numbers for us, but the cool thing is to have our tool, so we will create one using HTML and JS.

Code

First we will create the interface, we will do something simple, using only HTML.

<h1>Gerador de CPF E CNPJ válidos</h1>
<form name="form_main">
  <label for="numero">Número:</label> 
  <input name="numero" id="numero" size="20" type="text" /><br />
  Tipo:
  <input name="tipo" value="cpf" id="cpf" checked="checked" type="radio"> 
  <label for="cpf">CPF</label>
  <input name="tipo" value="cnpj" id="cnpj" type="radio" /> 
  <label for="cnpj">CNPJ</label>
  <input name="mascara" value="mascara" id="mascara" type="checkbox"> 
  <label for="mascara">Máscara</label><br /><br />
  <input name="button" value="Gerar" onclick="gera()" type="button">
</form>

In the html structure, we have an input that will display the generated values, below we have the types of numbers to be generated, CPF or CNPJ, and we have a checkbox that defines whether the generated number has a mask or not.

Now let’s start the JavaScript part.

let create_array = (total, numero) => Array.from(Array(total), () => number_random(numero));
let number_random = (number) => (Math.round(Math.random() * number));
let mod = (dividendo, divisor) => Math.round(dividendo - (Math.floor(dividendo / divisor) * divisor));

function gera() {
  document.form_main.numero.value = (document.form_main.tipo[0].checked) ? cpf() : cnpj();
}

In this part we have the auxiliary functions:

• create_array = Creates an array with the size of the total variable and the random values with a maximum number equal to the variable numero;
• number_random = Creates a random number of at most the value of variable number;
• mod = Returns the module of the dividendo and divisor;
• gera = Calls the function to generate CPF or CNPJ depending on the selected item;

function cpf() {
  let total_array = 9;
  let n = 9;
  let [n1, n2, n3, n4, n5, n6, n7, n8, n9] = create_array(total_array, n);

  let d1 = n9 * 2 + n8 * 3 + n7 * 4 + n6 * 5 + n5 * 6 + n4 * 7 + n3 * 8 + n2 * 9 + n1 * 10;
  d1 = 11 - (mod(d1, 11));
  if (d1 >= 10) d1 = 0;

  let d2 = d1 * 2 + n9 * 3 + n8 * 4 + n7 * 5 + n6 * 6 + n5 * 7 + n4 * 8 + n3 * 9 + n2 * 10 + n1 * 11;
  d2 = 11 - (mod(d2, 11));
  if (d2 >= 10) d2 = 0;

  if (document.form_main.mascara.checked)
    return `${n1}${n2}${n3}.${n4}${n5}${n6}.${n7}${n8}${n9}-${d1}${d2}`;
  else
    return `${n1}${n2}${n3}${n4}${n5}${n6}${n7}${n8}${n9}${d1}${d2}`;
}

Here we have the CPF function, this function generates the CPF numbers, below is the step by step:

1. First, the variables are defined, total_array(this defines the size of the array), n(this defines the maximum limit of the generated number);
2. Then the variables n1...n9 are removed from the array;
3. Then the variable d1(first check digit) is created, this variable is the beginning of the CPF generator algorithm, in which all values ​​are taken and multiplied by 2 to 10 (n9 * 2 + ... + n1 * 10);
4. After that, the value of d1 is rewritten with the return value of mod-11;
5. If the result of the previous operation is greater than or equal to 10 then the check digit is 0;
6. For d2(second check digit) the procedure is similar to d1, but now it starts from d1, (d1 * 2 + n9 * 3 + ... + n1 * 11);
7. After that the value of d2 is rewritten with the return value of mod-11;
8. If the result of the previous operation is greater than or equal to 10 then the check digit is 0;
9. Finally, it is checked whether the mask option is activated or not and returns the generated value;

function cnpj() {
  let total_array = 8;
  let n = 9;
  let [n1, n2, n3, n4, n5, n6, n7, n8] = create_array(total_array, n);
  let n9 = 0;
  let n10 = 0;
  let n11 = 0;
  let n12 = 1;

  let d1 = n12 * 2 + n11 * 3 + n10 * 4 + n9 * 5 + n8 * 6 + n7 * 7 + n6 * 8 + n5 * 9 + n4 * 2 + n3 * 3 + n2 * 4 + n1 * 5;
  d1 = 11 - (mod(d1, 11));
  if (d1 >= 10) d1 = 0;

  let d2 = d1 * 2 + n12 * 3 + n11 * 4 + n10 * 5 + n9 * 6 + n8 * 7 + n7 * 8 + n6 * 9 + n5 * 2 + n4 * 3 + n3 * 4 + n2 * 5 + n1 * 6;
  d2 = 11 - (mod(d2, 11));
  if (d2 >= 10) d2 = 0;

  if (document.form_main.mascara.checked)
    return `${n1}${n2}.${n3}${n4}${n5}.${n6}${n7}${n8}/${n9}${n10}${n11}${n12}-${d1}${d2}`;
  else
    return `${n1}${n2}${n3}${n4}${n5}${n6}${n7}${n8}${n9}${n10}${n11}${n12}${d1}${d2}`;
}

Here we have the CNPJ function, this function generates the CNPJ numbers, below is the step by step:

1. First, the variables are defined, total_array(this defines the size of the array), n(this defines the maximum limit of the generated number);
2. Then the variables n1...n8 are removed from the array;
3. Variables n9...n12 represent the branch or matrix block for CNPJ 0001;
4. Then the variable d1(first check digit) is created, this variable is the beginning of the CNPJ generator algorithm, it takes all the values ​​and multiplies from 2 to 9 and then repeats from 2 until the last (n12 * 2 + ... + n5 * 9 + n4 * 2 + ... + n1 * 5);
5. After that, the value of d1 is rewritten with the return value of mod-11;
6. If the result of the previous operation is greater than or equal to 10 then the check digit is 0;
7. For d2(second check digit) the procedure is similar to d1, but now it starts from d1, (d1 * 2 + n12 * 3 + ... + n6 * 9 + n5 * 2 + ... + n1 * 6);
8. After that the value of d2 is rewritten with the return value of mod-11;
9. If the result of the previous operation is greater than or equal to 10 then the check digit is 0;
10. Finally, it is checked whether the mask option is activated or not and returns the generated value;

ready as simple as that.

Demo

See the complete project working below.

Youtube

If you prefer to watch, I see the development on youtube (video in PT-BR).

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊