0

Tenho o seguinte código JS:

var botao = document.querySelector('input[type="submit"]');

    botao.addEventListener('click', function(e) {
        let form = document.querySelector('form');

        let ipt = {
             nome: form.nome.value,
             senha: form.senha.value                 
        }

        var users = [
          {nome: "Jorge", senha: "123"},
          {nome: "Joao", senha: "joao"},
          {nome: "Maria", senha: "maria"},
          {nome: "José", senha: "jose"},
          {nome: "Ana", senha: "ana"},
        ]

            for(let i = 0; i<users.length; i++) {                           
                if (ipt.nome == users[i].nome && ipt.senha == users[i].senha) {
                    e.preventDefault();
                    alert('Bem vindo ' + form.nome.value + " !");
                    window.location.href= "http://www.google.com.br";                       
                }
                else {                      
                    e.preventDefault();
                    alert('Dados incorretos!');                     
                }

            }       
    });

e o seguinte html:

<form name="form1" id="form1">
         <input name="nome" type="text" placeholder="Usuário "/> 
         <input name="senha" type="password" placeholder="Senha "/> 
         <input type="submit" value="Login"/>
      </form>

Estou fazendo uma verificação de acordo com os índices do vetor users, o problema é que: Ao verificar que o usuário existe, ele irá imprimir Dados incorretos até chegar no índice correto e imprimir a mensagem de bem vindo e efetuar o redirecionamento.

Veja o exemplo abaixo:

var botao = document.querySelector('input[type="submit"]');

    botao.addEventListener('click', function(e) {
        let form = document.querySelector('form');

        let ipt = {
             nome: form.nome.value,
             senha: form.senha.value                 
        }

        var users = [
          {nome: "Jorge", senha: "123"},
          {nome: "Joao", senha: "joao"},
          {nome: "Maria", senha: "maria"},
          {nome: "José", senha: "jose"},
          {nome: "Ana", senha: "ana"},
        ]

            for(let i = 0; i<users.length; i++) {                           
                if (ipt.nome == users[i].nome && ipt.senha == users[i].senha) {
                    e.preventDefault();
                    console.log('Bem vindo ' + form.nome.value + " !");
                    //window.location.href= "http://www.google.com.br";                       
                }
                else {                      
                    e.preventDefault();
                    console.log('Dados incorretos!');                     
                }

            }       
    });
<form name="form1" id="form1">
    	     <input name="nome" type="text" value="Ana" placeholder="Usuário "/> 
             <input name="senha" value="ana" type="password" placeholder="Senha "/>	
    		 <input type="submit" value="Login"/>
    	  </form>

Veja que ele imprime 4 mensagens de dados incorretos para só depois imprimir a de bem vindo.

Alguém pode me ajudar?

3 Respostas 3

1
var b = false

for(let i = 0; i<users.length; i++) {                           
    if (ipt.nome == users[i].nome && ipt.senha == users[i].senha) {
        e.preventDefault();
        console.log('Bem vindo ' + form.nome.value + " !");
        //window.location.href= "http://www.google.com.br";
        b = true                       
    }
} 

if(b == false) {                      
    e.preventDefault();
    console.log('Dados incorretos!');                     
}

Crie uma variável booleana false antes do for, se no meio do loop encontrar um usuario/senha correto mude a variável para true, quando terminar se ela ainda estiver false mostre a menssagem

for(let i = 0; i<users.length; i++) {                           
    if (ipt.nome == users[i].nome && ipt.senha == users[i].senha) {
        e.preventDefault();
        console.log('Bem vindo ' + form.nome.value + " !");
        //window.location.href= "http://www.google.com.br";
    } else if(i == users.length - 1) {                      
        e.preventDefault();
        console.log('Dados incorretos!');                     
    }
}

Ou no else dentro do for verificar também se o i é igual ao tamanho de users

5
  • Pois é, eu estava fazendo dessa forma, queria saber se existe outro jeito de realizar a implementação a não ser com uma verificação booleana.
    – Jorge.M
    5/03/2018 às 16:09
  • editei a resposta com outra solução, pode ser que em vez de == seja >, testa ai
    – Costamilam
    5/03/2018 às 16:13
  • Acrescentando o else if não surte efeito algum.
    – Jorge.M
    5/03/2018 às 16:17
  • você deve sobreescrever o else
    – Costamilam
    5/03/2018 às 16:18
  • Errei: o certo é } else if(i == users.length - 1) {
    – Costamilam
    5/03/2018 às 16:27
0

Utilize o Array.find para buscar um elemento no array, caso o elemento não seja encontrado, o retorno é undefined

search = users.find(user => user.nome==ipt.nome && user.senha==ipt.senha)

if(search){
  e.preventDefault();
  console.log('Bem vindo ' + form.nome.value + " !");
  //window.location.href= "http://www.google.com.br";
}
else{
  e.preventDefault();
  console.log('Dados incorretos!');   
}

OBS: Espero que você não esteja fazendo um sistema de controle de acesso dessa maneira, pois qualquer um poderá abrir o javascript e ver quais os usuários/senhas estão declarados em sua variável users

1
  • Não, até pq para realizar verificações desses tipos, seria necessário uma linguagem na parte do back-end, estou realizando apenas testes.
    – Jorge.M
    5/03/2018 às 17:45
0

Você pode usar o filter do Javascript, que é uma função onde você faz a comparação do que está procurando de modo que retorne um boolean, e pode substituir o for

var users = [
          {nome: "Jorge", senha: "123"},
          {nome: "Joao", senha: "joao"},
          {nome: "Maria", senha: "maria"},
          {nome: "José", senha: "jose"},
          {nome: "Ana", senha: "ana"},
        ]

var n = 'Joao'; // nome procurado
var s = 'joao'; // senha procurada

var u = users.filter(function(user){ 
    return user.nome == n && user.senha == s; 
});

if (u.length > 0) {
   console.log('Bem-vindo ' + u[0].nome);
} else {
   console.log('Dados incorretos');
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .