• Check Password Strength Using jQuery Code

    Password strength checking is an easy way to show the strength of user password on the registration forms. It helps users to choose more secure password when filling the forms.

    In this tutorial we will build a basic form field that provides live feedback to the users about the password strength. The basic idea is to evaluate the password string every time a user enters a character. We will check the password strength using a few regular expressions with jQuery.

    View Code JAVASCRIPT
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
    $(document).ready(function()
    {
        /*
            assigning keyup event to password field
            so everytime user type code will execute
        */
     
        $('#password').keyup(function()
        {
            $('#result').html(checkStrength($('#password').val()))
        })    
     
        /*
            checkStrength is function which will do the 
            main password strength checking for us
        */
     
        function checkStrength(password)
        {
            //initial strength
            var strength = 0
     
            //if the password length is less than 6, return message.
            if (password.length < 6) { 
                $('#result').removeClass()
                $('#result').addClass('short')
                return 'Too short' 
            }
     
            //length is ok, lets continue.
     
            //if length is 8 characters or more, increase strength value
            if (password.length > 7) strength += 1
     
            //if password contains both lower and uppercase characters, increase strength value
            if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1
     
            //if it has numbers and characters, increase strength value
            if (password.match(/([a-zA-Z])/) &#038;& password.match(/([0-9])/))  strength += 1 
     
            //if it has one special character, increase strength value
            if (password.match(/([!,%,&#038;,@,#,$,^,*,?,_,~])/))  strength += 1
     
            //if it has two special characters, increase strength value
            if (password.match(/(.*[!,%,&#038;,@,#,$,^,*,?,_,~].*[!,%,&#038;,@,#,$,^,*,?,_,~])/)) strength += 1
     
            //now we have calculated strength value, we can return messages
     
            //if value is less than 2
            if (strength < 2 )
            {
                $('#result').removeClass()
                $('#result').addClass('weak')
                return 'Weak'            
            }
            else if (strength == 2 )
            {
                $('#result').removeClass()
                $('#result').addClass('good')
                return 'Good'        
            }
            else
            {
                $('#result').removeClass()
                $('#result').addClass('strong')
                return 'Strong'
            }
        }
    });
    // ]]></script>
    1
    
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />



Comments on this post

Leave a Reply

  • Security Code :


    three × 8 =