Skip to main content
removeu 219 caracteres do conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 127
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>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.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>
$(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>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.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>
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>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.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>
$(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>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.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>
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>
$(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>
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 127

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>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.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>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.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.