JQuery Cek Kekuatan Password

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

Tweet