Barra para exibir força da senha em JS

Olá, quem nunca achou legal por no seu website uma barrinha simples para indicar a força da senha?, bom o tutorial de hoje é justamente esse, como colocar uma barra de força da senha no seu website :D
 chega de papo, mãos à obra !


Vamos começar colocando uma área para podermos escrever nossa senha que será medida a força.
para isso usaremos um simples input:

Código:
<input type='text' />
Agora vamos complexar um pouco mais as coisas, vamos criar uma função em JS para pegar os caracteres do input, medir a força da senha, e desenhar uma barrinha colorida de acordo com a força da senha.
Para isso faremos o seguinte:
Vamos criar uma função JS para calcular a força da senha.
Chamar a função JS a cada vez que o usuário pressionar uma tecla.
alterar o status da barrinha todas as vezes que o calculo for realizado.
vamos ao que interessa os CÓDIGOS.
Código HTML do input:
<input type='text' id='SenhaCalc' onkeyup="calcular()" /> <div id='mostrares'> </div>

como pode ver, colocamos uma ID no nosso campo de texto com o valor de "SenhaCalc" para que saibamos que é daqui que será retirada a senha para efetuarmos o cálculo, e também colocamos o ' onkeyup ' que é um evento, que será realizado todas as vezes que o usuário terminar de pressionar a tecla. E o valor atribuido a ' onkeyup ' foi a nossa função JS que vai executar os cálculos. Função JS com explicação: function calcular(){/*DEFINIMOS A FUNÇAO*/ senha = document.getElementById('SenhaCalc').value;/*Dizemos que a variavel senha terá o valor contido no campo de texto*/ forca = 0; /*Definimos a força inicial do calculo*/ mostra = document.getElementById('mostra'); /*Dizemos qual div receberá o design de acordo com a força da senha*/ if((senha.length >= 4) && (senha.length <= 7)){/*Verificamos o tamanho da senha e adicionamos 10 a força dela caso seja maior que 4 e menor que 7*/ forca += 10; }else if(senha.length>7){/*verificamos se a senha possui mais de 7 caracteres, caso tenha adicionamos 25 ao invés de 10*/ forca += 25; } if(senha.match(/[a-z]+/)){/*Caso a senha contenha caracteres minúsculos adicionamos 10 a força*/ forca += 10; } if(senha.match(/[A-Z]+/)){/*Caso a senha contenha caracteres maiúsculos adicionamos 10 a força*/ forca += 20; } if(senha.match(/\d+/)){/*Procuramos qualquer numero de qualquer tamanho e caso tenha adicionamos 20 a força*/ forca += 20; } if(senha.match(/\W+/)){/*Procuramos por palavras e caso tenha adicionamos 25 a força*/ forca += 25; } return mostra_res(); /*No fim chamamos uma função chamada Mostra_res() para exibir a força da senha*/ } function mostra_res(){/*A função começa verificando a força da senha*/ if(forca < 30){/*Caso a força seja menos de 30 dizemos que a senha é fraca e damos a classe de 'senhafraca' para a div */ mostra.innerHTML = "<div class='senhafraca'></div> "; }else if((forca >= 30) && (forca < 60)){/*Caso a força seja mais de 30 e menos de 60 dizemos que a senha é moderada damos a classe de 'senhamoderada' para a div */ mostra.innerHTML = "<div class='senhamoderada'></div> "; }else if((forca >= 60) && (forca < 85)){/*Caso a força seja mais de 60 e menos de 85 dizemos que a senha é forte e damos a classe de 'senhaforte' para a div */ mostra.innerHTML = "<div class='senhaforte'></div> "; }else{/*Caso a força seja mais de 85 dizemos que a senha é excelente e damos a classe de 'senhaexcelente' para a div */ mostra.innerHTML = "<div class='senhaexcelente'> </div> "; } }
Design das Div's (CSS OPCIONAL):
.senhafraca{ height: 2px; width: 10%; background-color: red; } .senhamoderada{ height: 2px; width: 30%; background-color: orange; } .senhaforte{ height: 2px; width: 50%; background-color: green; } .senhaexcelente{ height: 2px; width: 70%; background-color: blue; }
Resultado Final:

Força: