[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 variablenumero
; -
number_random = Creates a random number of at most the value of variable
number
; -
mod = Returns the module of the
dividendo
anddivisor
; -
gera = Calls the function to generate
CPF
orCNPJ
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:
- First, the variables are defined,
total_array
(this defines the size of the array),n
(this defines the maximum limit of the generated number); - Then the variables
n1...n9
are removed from the array; - 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
); - After that, the value of
d1
is rewritten with the return value ofmod-11
; - If the result of the previous operation is greater than or equal to 10 then the check digit is
0
; - For
d2
(second check digit) the procedure is similar to d1, but now it starts fromd1
, (d1 * 2 + n9 * 3 + ... + n1 * 11
); - After that the value of
d2
is rewritten with the return value ofmod-11
; - If the result of the previous operation is greater than or equal to 10 then the check digit is
0
; - 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:
- First, the variables are defined,
total_array
(this defines the size of the array),n
(this defines the maximum limit of the generated number); - Then the variables
n1...n8
are removed from the array; - Variables
n9...n12
represent the branch or matrix block for CNPJ0001
; - 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
); - After that, the value of
d1
is rewritten with the return value ofmod-11
; - If the result of the previous operation is greater than or equal to 10 then the check digit is
0
; - For
d2
(second check digit) the procedure is similar to d1, but now it starts fromd1
, (d1 * 2 + n12 * 3 + ... + n6 * 9 + n5 * 2 + ... + n1 * 6
); - After that the value of
d2
is rewritten with the return value ofmod-11
; - If the result of the previous operation is greater than or equal to 10 then the check digit is
0
; - 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! 😊😊
Top comments (0)