Ver força da Password – JQuery

No artigo de hoje vamos ver como fazer um verificador de força de password em JQuery, de maneira bem simples mas acima de tudo funcional.

Verificar a força da password é muito útil para sites que permitem o registo do usuário e/ou actualizações de password.

A maioria dos utilizadores o que quer é apressar o processo de registo, e geralmente não dão muita atenção à força da password, isto leva a uma básica falta de segurança visto que a password podem ser descobertas facilmente.

Tendo isto em mente, vamos criar um verificador de força de password utilizando o JQuery, ajudando os utilizadores, de forma a terem boas combinações.

HTML

Em primeiro lugar criamos um formulário tendo em atenção os ID’s, sendo que é isso que o JQuery utiliza.

<form action="" method="post" id="passwordTest">
    <div><input type="password" id="password1" /></div>
    <div><input type="password" id="password2" /></div>
    <div id="pass-info"></div>
</form>

JQuery

Passamos a parte do CSS porque provavelmente já deve ter no seu formulário os campos necessário para este teste.
Utilizamos as seguintes regras, para definir a força da password:

• Fraca: 5 caracteres ou mais
• Media: caracteres com pelo menos um digito
• Forte: caracteres maiúsculos e minúsculos com pelo menos um digito
• Muito forte: caracteres maiúsculos e minúsculos com pelo menos um digito e um carácter especial

var WeakPass = /(?=.{5,}).*/; 
var MediumPass = /^(?=S*?[a-z])(?=S*?[0-9])S{5,}$/; 
var StrongPass = /^(?=S*?[A-Z])(?=S*?[a-z])(?=S*?[0-9])S{5,}$/; 
var VryStrongPass = /^(?=S*?[A-Z])(?=S*?[a-z])(?=S*?[0-9])(?=S*?[^w*])S

Neste momento temos as regras criadas, o próximo passo é usar o JQuery para executar essas regras em ‘tempo real’. Para este trabalho vamos usar o método keyup(), este é accionado quando o utilizador ‘solta’ uma tecla do teclado, isto permite uma sensação de execução em tempo real por parte do JQuery.

$(password1).on('keyup', function(e) {
    if(VryStrongPass.test(password1.val())){
        passwordsInfo.removeClass().addClass('vrystrongpass').html("Muito Forte! (Impressionante, por favor não se esqueça da password!)");
    }   
    else if(StrongPass.test(password1.val())){
        passwordsInfo.removeClass().addClass('strongpass').html("Forte! (Insira caracteres especiais para tornar ainda mais forte");
    }   
    else if(MediumPass.test(password1.val())){
        passwordsInfo.removeClass().addClass('goodpass').html("Bom! (Ponha letras maiúsculas)");
    }
    else if(WeakPass.test(password1.val())){
        passwordsInfo.removeClass().addClass('stillweakpass').html("Algo fraco! (Dígitos aumentar a força da password)");
    }
    else{
        passwordsInfo.removeClass().addClass('weakpass').html("Muito fraca! (Deve ter 5 ou mais caracteres)");
    }
});

Mais uma vez o utilizamos o método keyup() para ver se a password do campo 1 é igual a password do campo 2, isto em ‘tempo real’. Temos assim um sistema amigo do utilizador final.

$(password2).on('keyup', function(e) {    
    if(password1.val() !== password2.val())
    {
        passwordsInfo.removeClass().addClass('weakpass').html("As passwords não são iguais!");   
    }else{
        passwordsInfo.removeClass().addClass('goodpass').html("Passwords iguais!");  
    }  
});

O ultimo passo é juntar tudo, de preferência em funções para termos opção de escolher o que chamar.

$(document).ready(function() {
    var password1       = $('#password1');
    var password2       = $('#password2');
    var passwordsInfo   = $('#pass-info');

    passwordStrengthCheck(password1,password2,passwordsInfo);

});

function passwordStrengthCheck(password1, password2, passwordsInfo){
    var WeakPass = /(?=.{5,}).*/; 
    var MediumPass = /^(?=S*?[a-z])(?=S*?[0-9])S{5,}$/; 
    var StrongPass = /^(?=S*?[A-Z])(?=S*?[a-z])(?=S*?[0-9])S{5,}$/; 
    var VryStrongPass = /^(?=S*?[A-Z])(?=S*?[a-z])(?=S*?[0-9])(?=S*?[^w*])S{5,}$/; 

    $(password1).on('keyup', function(e) {
        if(VryStrongPass.test(password1.val())){
            passwordsInfo.removeClass().addClass('vrystrongpass').html("Muito Forte! (Impressionante, por favor não se esqueça da password!)");
        }   
        else if(StrongPass.test(password1.val())){
            passwordsInfo.removeClass().addClass('strongpass').html("Forte! (Insira caracteres especiais para tornar ainda mais forte");
        }   
        else if(MediumPass.test(password1.val())){
            passwordsInfo.removeClass().addClass('goodpass').html("Bom! (Ponha letras maiúsculas)");
        }
        else if(WeakPass.test(password1.val())){
            passwordsInfo.removeClass().addClass('stillweakpass').html("Algo fraco! (Digitos aumentar a força da password)");
        }
        else{
            passwordsInfo.removeClass().addClass('weakpass').html("Muito fraca! (Deve ter 5 ou mais caracteres)");
        }
    });

    $(password2).on('keyup', function(e) {
        if(password1.val() !== password2.val()){
            passwordsInfo.removeClass().addClass('weakpass').html("As passwords não são iguais!");   
        }else{
            passwordsInfo.removeClass().addClass('goodpass').html("Passwords iguais!");  
        }
    });
}

Pode efectuar o download de todo o conteúdo utilizado neste artigo, aqui.

Por hoje é tudo até a próxima! Não se esqueçam de deixar a vossa opinião, comentando.

---

---