27 Sep 2013

JQuery Cek Kekuatan Password

Jika anda mempunyai web aplikasi register member dan ingin membuat keamanan untuk member, maka ada modul untuk mengecek kekuatan password.... thumbnail 1 summary
Jika anda mempunyai web aplikasi register member dan ingin membuat keamanan untuk member, maka ada modul untuk mengecek kekuatan password. Namun dengan fungsi ini, member pun enggan juga membuat passwordnya sendiri sesuai dengan syarat sistem.

Daripada mengabaikan, lebih baik kita membuat sendiri yuk

Include-kan Jquery pada halaman script.
Contoh include jquery jika  ada di folder web
<script type="text/javascript" src="jquery-1.9.0.js"/></script>

Contoh include jquery menggunakan cdn
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
Lalu buatlah script ajax :
<script>
$(document).ready(function() {

    $('#pass').keyup(function(e) {
        var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
        var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
        var enoughRegex = new RegExp("(?=.{6,}).*", "g");
        if (false === enoughRegex.test($(this).val())) {
            $('#passstrength').addClass( "label label-important" );
            $('#passstrength').html('Lemah Sekali');
           
        } else if (strongRegex.test($(this).val())) {           
          
            $('#passstrength').addClass( "label label-success" );
            $('#passstrength').html('Wow!');
        } else if (mediumRegex.test($(this).val())) {
         
            $('#passstrength').addClass( "label label-warning" );
            $('#passstrength').html('Lumayan!');
        } else {
          
            $('#passstrength').addClass( "label label-important" );
            $('#passstrength').html('Lemah!');
        }
        return true;
    });

});
</script>
Buatlah beberapa tag html untuk eksekusi ajax
<input type="password" name="pass" id="pass" /><br>
<span id="passstrength"></span>
Keterangan :
Menggunakan CSS bootstrap


Jika anda terbantu dengan artikel saya, dimohon klik iklan pada bagian atas/bagian bawah/bagian kanan (Untuk memberikan semangat penulis membuat artikel :D )
(Gunakan Google Accounts anda untuk berkomentar atau akun disqus)
Donasi :
BNI Syariah 0649420235 AN Heru Rahmat Akhnuari
BCA 3120670319 an. Heru Rahmat Akhnuari
BRI 005801112479504 an. Heru Rahmat Akhnuari