Medidor de força de senha com jQuery (pStrength)

Google - Password Strength

Medidor de força de senha do Google

Estava desenvolvendo um projeto e precisei colocar um medidor de força da senha, primeira coisa que fiz foi procurar na internet algo similar achei vários alguns até tive problemas, porém achei um bem legal que media a força da senha, porém estava em inglês, dai traduzi e estou disponibilizando aqui para vocês o código para vocês poderem usufruir, lembrando que os créditos desse plugin não são meus eu somente traduzi e alterei para que o código html que ele gera seja inserido após o input, na versão anterior era inserido antes, algo que nunca vi ninguém usar, segue abaixo como usar:

<script type="text/javascript" src="media/js/jquery.min.js?v=1.7.1"></script> 
<script type="text/javascript" src="media/js/jquery.pstrength.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){

    $('#input_senha').pstrength();

});
</script>

Lembrando de que ele precisa do jQuery e que testei usando o jQuery 1.7.1. Sendo assim o seu cógido html passará disso:

<label for="input_senha">Senha</label>
 <input type="password" id="input_senha" />

para isso, claro que sem a devida indentação:

<label for="input_senha">Senha</label>
<input type="password" id="input_senha" /> 
<div id="pstrength">
    <div id="input_senha_minchar"></div>
    <div id="input_senha_text">
        <span style="color: #ccc;">Muito pequena</span>
    </div>
    <div id="input_senha_bar" style="border: 1px solid white; font-size: 1px; height: 5px; width: 5%; background-color: rgb(204, 204, 204); "></div>
</div>

preste atenção que o código gerado é baseado no id do input sendo analisado, “input_senha_minchar”, “input_senha_text”, “input_senha_bar”, caso você queria estilizar o CSS basta seguir a regra abaixo:

#pstrength{}
#pstrength .pstrength-minchar{}
#pstrength .pstrength-info{}
#pstrength .pstrength-bar{}

Bom isso me ajudou bastante, pois ganhei bastante, tempo e sei que poderá ajudá-los.

Para baixar o plugin vá em meu pastebin:
http://pastebin.com/K5F6wC2q

Então é isso ai, vlw galera.

hugs

, , , , , ,

Comments are closed.