Membuat Password Checker dengan JQuery

Selamat pagi agan-agan sekalian pagi ini saya ingin share cara mebuat password Checker dengan JQuery. Password Checker disini biasaya digunakan pada saat Register Account Baru. Cara kerjanya kita masukan password dan re-type password jika password nya sama atau kurang strength akan keluar message info. Silakan simak berikut ini tutorialsnya. Tutorials ini saya ambil dari berbagai situs.

Pertama buat semua Form, sebagai berikut:

<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>

Berikut script Regex-nya

//Must contain 5 characters or more
var WeakPass = /(?=.{5,}).*/;
//Must contain lower case letters and at least one digit.
var MediumPass = /^(?=\S*?[a-z])(?=\S*?[0-9])\S{5,}$/;
//Must contain at least one upper case letter, one lower case letter and one digit.
var StrongPass = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])\S{5,}$/;
//Must contain at least one upper case letter, one lower case letter and one digit.
var VryStrongPass = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])(?=\S*?[^\w\*])\S{5,}$/;

Berikut script password 1 ketika memasukan password.

$(password1).on('keyup', function(e) {
    if(VryStrongPass.test(password1.val()))
    {
        passwordsInfo.removeClass().addClass('vrystrongpass').html("Very Strong! (Awesome, please don't forget your pass now!)");
    }  
    else if(StrongPass.test(password1.val()))
    {
        passwordsInfo.removeClass().addClass('strongpass').html("Strong! (Enter special chars to make even stronger");
    }  
    else if(MediumPass.test(password1.val()))
    {
        passwordsInfo.removeClass().addClass('goodpass').html("Good! (Enter uppercase letter to make strong)");
    }
    else if(WeakPass.test(password1.val()))
    {
        passwordsInfo.removeClass().addClass('stillweakpass').html("Still Weak! (Enter digits to make good password)");
    }
    else
    {
        passwordsInfo.removeClass().addClass('weakpass').html("Very Weak! (Must be 5 or more chars)");
    }
});

Berikut script password 2 ketika memasukan password yang kedua.

$(password2).on('keyup', function(e) {    
    if(password1.val() !== password2.val())
    {
        passwordsInfo.removeClass().addClass('weakpass').html("Passwords do not match!");  
    }else{
        passwordsInfo.removeClass().addClass('goodpass').html("Passwords match!"); 
    }  
});

Berikut full source codenya.

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var password1       = $('#password1'); //id untuk password pertama
    var password2       = $('#password2'); //id untuk password kedua
    var passwordsInfo   = $('#pass-info'); //id untuk message info
   
    passwordStrengthCheck(password1,password2,passwordsInfo); //call password check function
   
});

function passwordStrengthCheck(password1, password2, passwordsInfo)
{
    //Must contain 5 characters or more
    var WeakPass = /(?=.{5,}).*/;
    //Must contain lower case letters and at least one digit.
    var MediumPass = /^(?=\S*?[a-z])(?=\S*?[0-9])\S{5,}$/;
    //Must contain at least one upper case letter, one lower case letter and one digit.
    var StrongPass = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])\S{5,}$/;
    //Must contain at least one upper case letter, one lower case letter and one digit.
    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("Very Strong! (Awesome, please don't forget your pass now!)");
        }  
        else if(StrongPass.test(password1.val()))
        {
            passwordsInfo.removeClass().addClass('strongpass').html("Strong! (Enter special chars to make even stronger");
        }  
        else if(MediumPass.test(password1.val()))
        {
            passwordsInfo.removeClass().addClass('goodpass').html("Good! (Enter uppercase letter to make strong)");
        }
        else if(WeakPass.test(password1.val()))
        {
            passwordsInfo.removeClass().addClass('stillweakpass').html("Still Weak! (Enter digits to make good password)");
        }
        else
        {
            passwordsInfo.removeClass().addClass('weakpass').html("Very Weak! (Must be 5 or more chars)");
        }
    });
   
    $(password2).on('keyup', function(e) {
       
        if(password1.val() !== password2.val())
        {
            passwordsInfo.removeClass().addClass('weakpass').html("Passwords do not match!");  
        }else{
            passwordsInfo.removeClass().addClass('goodpass').html("Passwords match!"); 
        }
           
    });
}
</script>

Silakan kembangkan sendiri tutorials diatas menjadi lebih sempurna dari ini.

Salam Hangat

Depri Pramana