Ver força da Password – JQuery

menu slide
Menu slide para mobile – JQuery
1 Novembro, 2013
criarestilos padroes
Como instalar e usar Padrões no Photoshop CS6
3 Novembro, 2013
Mostrar tudo
força 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.

Deixar uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *