Criar CAPTCHA numérico simples com JavaScript

Muitos formulários não possuem algum tipo de validação para minimizar os ataques de robôs, que podem mandar spam se for um formulário de contado ou tentativa de login se for um formulário de login.

Vou mostrar como criar um CAPTCHA numérico básico que funciona no lado do cliente, que consiste em desbloquear o botão enviar se o valor escrito pelo usuário for a soma dos números exibidos.

O que é um CAPTCHA?

É um tipo de desafio que pode ser numérico, palavras ou imagens com a intenção de provar que você é uma pessoa real, o objetivo é limitar o acesso e tráfego criado por bots e outros tipos de robôs que vasculham a Internet todos os dias gerando tráfego artificial, disparando spams e produzindo ataques.

 

Criando o HTML do desafio do CAPTCHA

Para esse desafio será gerado aleatoriamente dois números e o objetivo se escrever no campo input a soma desses números.

Copie o HTML abaixo.

<div class="math">

        <p id="valor1" ></p>

        <p> + </p>

        <p id="valor2" ></p>

        <p> =</p>

        <input id="totalvalores" type="text" name="totalvalores" required="">

    </div>

    <p id="aviso"></p>

 

    <button id="enviar" type="submit">Entrar</button>

 

Para não ficar muito estranho vamos colocar uma formatação da DIV do math assim colocando todos os elementos em linha.

<style type="text/css">

.math {

  display: flex;

  justify-content: flex-start;

}

 

#totalvalores{

    width: 40px;

}

</style>

 

Criando o JavaScript para validação das somas.

Usando os Ids para localizar os campos certos vamos gerar os números aleatórios usando o Math.random() e depois guardando em uma variável para ser inserido.

var valor1 = Math.floor((Math.random() * 10) + 1);

var valor2 = Math.floor((Math.random() * 10) + 1);

 

Agora que já tem os dois valores vamos inserir nos Ids com os nomes "valor1" e "valor2".

document.getElementById("valor1").innerHTML = valor1;

document.getElementById("valor2").innerHTML = valor2;

 

Os campos vão estar com os valores ao carregar a página, mas é necessário bloquear o botão que envia, com o atributo disabled.

document.getElementById("enviar").setAttribute("disabled", "");

 

Para finalizar restou criar a validação e o aviso, para isso acontecer o campo input deve receber um evento que ativa a função sempre que sair o foco do input.

document.getElementById('totalvalores').onchange = function(){validar()}

 

A validação consiste em pegar os dois números gerados somados e compar com o valor escrito no input da resposta. Ou seja, se estiver igual, a função vai remover o disabled e criar o texto de aviso.

function validar(){

 

                var totalvalores = document.getElementById("totalvalores").value;

 

                if (totalvalores == valor1 + valor2) {

                               document.getElementById('aviso').innerHTML = "reCAPTCHA válido";

                               document.getElementById("enviar").removeAttribute("disabled");

                              

                }else{

                               document.getElementById('aviso').innerHTML = "reCAPTCHA inválido";

                               document.getElementById("enviar").setAttribute("disabled", "");

                }

 

}

 

Se você gostou desse e quer saber mais sobre o controle de atributos e como remover ou adicionar, confira no link abaixo.

https://desenvolvedor-web.blogspot.com/2020/12/remover-e-inserir-um-atributo-na-tag.html