2

Boa noite pessoal,

Preciso validar a senha que será digitada no input simultanêo à digitação desta, ou seja, preciso validar com javascritp. Possuo 3 Divs e textos que devem ter sua cor alterada conforme as especificações de senha sejam atingidas (6 caracteres = Amarelo, 6 caracteres entre maiúsculos e minúsculos = laranja, 6 caracteres entre entre maiúsculos, minúsculos e números = verde), porém desconheço uma forma de validar essas informações.

Alguem poderia me ajudar?

<form>
      <div class="form-group">
        <label for="exampleInputEmail1">E-mail</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="email">
      </div>
      <div class="form-group">
        <label for="senha">Senha</label>
        <input type="password" class="form-control" id="senha"></br>
        <div class="row" id="barras">
          <div id="barra" class="col-md-3"></div>
          <div id="barra_1" class="col-md-3"></div>
          <div id="barra_2" class="col-md-3"></div>
        </div>
      </div>
      <p>Pelo menos 6 caracteres</p>
      <p>Pelo menos 1 letra maiúscula</p>
      <p>Pelo menos 1 número</p></br>
      <div class="form-group">
        <label for="confirma_senha">Confirme sua senha</label>
        <input type="password" class="form-control" id="confirma_senha">
      </div>
      <button type="submit" class="btn btn-primary">Cadastrar</button>         
    </form>
3
  • Qual seria a função dessas divs "barra"?
    – Sam
    Commented 23/07/2018 às 1:08
  • pt.stackoverflow.com/q/58857/101
    – Maniero
    Commented 23/07/2018 às 1:13
  • Verifique com uma expressão regular o valor digitado no input e então mostre/esconda ou modifique a classe ou a cor de uma div
    – Costamilam
    Commented 23/07/2018 às 1:23

1 Resposta 1

1

Pode validar usando Expressões Regulares, onde:

/.{6,}/      → 6 caracteres ou mais
/[A-Z]{1,}/  → 1 letra maiúscula ou mais
/[0-9]{1,}/  → 1 número ou mais

Só modifiquei no seu HTML colocando as frases dentro de cada div e alterando a cor de fundo de acordo com os critérios atendidos pelas expressões acima.

Utilizei um evento oninput para escutar quando algo é digitado no campo senha. Esse evento irá chamar a função val() que irá validar a senha.

Utilizei também um evento onsubmit que irá detectar quando for tentado submetê-lo. Esse evento também irá consultar a função val(), que retornará true caso a senha seja válida e igual ao campo confirmar_senha, ou false, caso contrário. Se retornar false o formulário não será enviado.

Veja como ficou:

document.addEventListener("DOMContentLoaded", function(){

   document.forms[0].onsubmit = function(e){
      return val(e);
   }

   senha.oninput = function(e){
      val(e);
   }

   function val(e){

      var passo, passo1, passo2,
      v = senha.value,
      cor = "#fff",
      e = e.type == "submit";
   
      // verifica se tem 6 caracteres ou mais
      if(v.match(/.{6,}/)){
         barra.style.backgroundColor = "#FFFEB5";
         passo = true;
      }else{
         barra.style.backgroundColor = cor;
         passo = false;
      }

      // verifica se tem ao menos uma letra maiúscula
      if(v.match(/[A-Z]{1,}/)){
         barra_1.style.backgroundColor = "#FFD27E";
         passo1 = true;
      }else{
         barra_1.style.backgroundColor = cor;
         passo1 = false;
      }

      // verifica de tem ao menus um número
      if(v.match(/[0-9]{1,}/)){
         barra_2.style.backgroundColor = "#D8FFCD";
         passo2 = true;
      }else{
         barra_2.style.backgroundColor = cor;
         passo2 = false;
      }

      // o formulário só será enviado pelo evento submit
      // e todos os passos devem ser verdadeiros para validar
      if(passo && passo1 && passo2 && v == confirma_senha.value && e){
         alert("Senha ok!");
         return true;
      }else if(e){
         alert("Senha inválida ou não conferem");
         return false;
      }
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="pagina.php">
   <div class="form-group">
     <label for="exampleInputEmail1">E-mail</label>
     <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="email">
   </div>
   <div class="form-group">
     <label for="senha">Senha</label>
     <input type="password" class="form-control" id="senha"></br>
     <div class="row" id="barras">
       <div id="barra" class="col-md-3">Pelo menos 6 caracteres</div>
       <div id="barra_1" class="col-md-3">Pelo menos 1 letra maiúscula</div>
       <div id="barra_2" class="col-md-3">Pelo menos 1 número</div>
     </div>
   </div>
   <div class="form-group">
     <label for="confirma_senha">Confirme sua senha</label>
     <input type="password" class="form-control" id="confirma_senha">
   </div>
   <button class="btn btn-primary">Cadastrar</button>         
 </form>

Já que você usa Bootstrap, pode fazer a mesma coisa usando códigos jQuery. Neste caso a diferença não é muito grande:

$(document).ready(function(){
   
   $("form").submit(function(e){
      return val(e);
   });

   $(senha).on("input", function(e){
      val(e);
   });

   function val(e){

      var passo, passo1, passo2,
      v = senha.value,
      cor = "#fff", // cor padrão das divs
      e = e.type == "submit";
   
      // verifica se tem 6 caracteres ou mais
      if(v.match(/.{6,}/)){
         $(barra).css("background-color", "#FFFEB5");
         passo = true;
      }else{
         $(barra).css("background-color", cor);
         passo = false;
      }

      // verifica se tem ao menos uma letra maiúscula
      if(v.match(/[A-Z]{1,}/)){
         $(barra_1).css("background-color", "#FFD27E");
         passo1 = true;
      }else{
         $(barra_1).css("background-color", cor);
         passo1 = false;
      }

      // verifica de tem ao menus um número
      if(v.match(/[0-9]{1,}/)){
         $(barra_2).css("background-color", "#D8FFCD");
         passo2 = true;
      }else{
         $(barra_2).css("background-color", cor);
         passo2 = false;
      }

      // o formulário só será enviado pelo evento submit
      // e todos os passos devem ser verdadeiros para validar
      if(passo && passo1 && passo2 && v == $(confirma_senha).val() && e){
         alert("Senha ok!");
         return true;
      }else if(e){
         alert("Senha inválida ou não conferem");
         return false;
      }
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="pagina.php">
   <div class="form-group">
     <label for="exampleInputEmail1">E-mail</label>
     <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="email">
   </div>
   <div class="form-group">
     <label for="senha">Senha</label>
     <input type="password" class="form-control" id="senha"></br>
     <div class="row" id="barras">
       <div id="barra" class="col-md-3">Pelo menos 6 caracteres</div>
       <div id="barra_1" class="col-md-3">Pelo menos 1 letra maiúscula</div>
       <div id="barra_2" class="col-md-3">Pelo menos 1 número</div>
     </div>
   </div>
   <div class="form-group">
     <label for="confirma_senha">Confirme sua senha</label>
     <input type="password" class="form-control" id="confirma_senha">
   </div>
   <button class="btn btn-primary">Cadastrar</button>         
</form>

Retirei também o type="submit" do button, pois ele dentro do formulário já é do tipo submit, não precisa declarar isso.

2
  • muito obrigado, sua dica ajudou bastante, consegui adequar a ideia as minhas necessidades e funcionou.! Commented 24/07/2018 às 0:22
  • Legal Lucas!...
    – Sam
    Commented 24/07/2018 às 0:23

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