How To Check Password Strength Using JQuery

WebSolutionStuff | Sep-04-2020 | Categories : PHP jQuery

In this post i will show you how to check password strength using jQuery,here i will check whether password strength is fulfill min character requirment or not.

I willl give you example how to check password size using javascript and jQuery password strength.password is most imporatant part of authentication many times you can see error message like enter valid password or password must be atleast 6 character etc.So, here we are cheke password using jquery.

 

<html>
<body>
    <head>
      <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <title>How to check password strength in jQuery - websolutionstuff.com</title>
        <style>            
            #password-strength-status {
                padding: 5px 10px;
                color: #FFFFFF;
                border-radius: 4px;
                margin-top: 5px;
            }

            .medium-password {
                background-color: #b7d60a;
                border: #BBB418 1px solid;
            }

            .weak-password {
                background-color: #ce1d14;
                border: #AA4502 1px solid;
            }

            .strong-password {
                background-color: #12CC1A;
                border: #0FA015 1px solid;
            }
        </style>        
    </head>
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
          <h2>How to check password strength in jQuery - websolutionstuff.com</h2><br/>        
            <label>Password:</label>
            <input type="password" name="password" id="password" class="form-control"/>
            <div id="password-strength-status"></div>        
      </div>
    </div>    
</body>
</html>
<script>
$(document).ready(function () {
  $("#password").on('keyup', function(){
    var number = /([0-9])/;
    var alphabets = /([a-zA-Z])/;
    var special_characters = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<])/;
    if ($('#password').val().length < 6) {
        $('#password-strength-status').removeClass();
        $('#password-strength-status').addClass('weak-password');
        $('#password-strength-status').html("Weak (should be atleast 6 characters.)");
    } else {
        if ($('#password').val().match(number) && $('#password').val().match(alphabets) && $('#password').val().match(special_characters)) {
            $('#password-strength-status').removeClass();
            $('#password-strength-status').addClass('strong-password');
            $('#password-strength-status').html("Strong");
        } else {
            $('#password-strength-status').removeClass();
            $('#password-strength-status').addClass('medium-password');
            $('#password-strength-status').html("Medium (should include alphabets, numbers and special characters or some combination.)");
        }
    }
  });
}); 
</script>

 

And finally you will get output like below screen print.

how_to_check_passowrd_strength_in_jquery

Featured Post



Follow us
facebooklogo github instagram twitter