Entrar Ainda não tem acesso?
3
respostas

Expressão Regular - Testar o valor de um input contra uma RegExp

por Isaque Silva de Almeida
| 6.4k xp | 5 posts

Olá JavaScript experts,

estou tentando fazer uma validação do valor digitado num campo input de texto após o clique no botão.

Este é o HTML:

<label for="ri">RI</label>
<input type="text" id="ri" name="ri">

<button id="btn-ri">Validar RI</button>

e este é o JS:

 var ri = document.querySelector("#ri").value;

var botaoRi = document.querySelector("#btn-ri");

var RegExp = /[0-9]{2}\-[0-9]{3}/;

  botaoRi.addEventListener("click", function(){
    console.log(RegExp.test(ri));

});

A idéia é que o valor digitado no campo input atenda este formato "00-000".

Se eu defino a variavel RI com um valor direto no javascript funciona:

var ri = "50-664";

mas quando peço pra validar do input sempre retorna falso.

Agradeço qualquer ajuda.

3 respostas
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Fala Isaque, tudo bom cara?

Duas coisinhas só, o valor da variavel ri estava vindo vazio, pois quando o click é executado ele está pegando o valor antigo da variável que é vazio, pois ela não é atualizada dinamicamente quando você faz uma interação no campo, você precisa selecionar novamente o valor dentro da função click ou fazer como eu fiz no exemplo abaixo:

var ri = document.querySelector("#ri");

var botaoRi = document.querySelector("#btn-ri");

var expressaoReg = /[0-9]{2}\-[0-9]{3}/;

botaoRi.addEventListener("click", function(){

    console.log(expressaoReg.test(ri.value));

});

A outra foi mudar o nome da variavel RegExp, isso está sobreescrevendo o construtor de expressão regular do JavaScript e pode trazer problemas no futuro :)

por Isaque Silva de Almeida
| 6.4k xp | 5 posts

Muito obrigado Mario,

então basicamente eu só deveria ter tirado o ".value" da definição da variável e colocado na função test da expressão.

Pode dar uma olhada na expressão: "/[0-9]{2}-[0-9]{3}/" ?

Porque está aceitando qualquer valor de números com - no meio.

Eu gostaria que antes do - fosse aceito exatamente 2 números e depois do - exatamente 3 números.

por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Opa, o adicional na regex seria dar o começo e o final dela com ^ para definir o inicio e $ para definir como seria o final da regex

/^[0-9]{2}-[0-9]{3}$/.test('00-000')