password strength checker jquery Example

password strength checker jquery : create password strength checker in jQuery full source code with example. check whenever key is pressed using keyup() function.

password strength checker jquery

How to check Password strength in jQuery with Demo? jQuery Function to Check Password Strength simple Password Strength Checker Source Code. using the jQuery UI Progressbar widget to display the password strength according to the user input.

How To Check Password Strength Using JQuery?

index.html

<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 - www.pakainfo.com</title>
        <style>            
            #secure-pass-strength-status {
                padding: 5px 10px;
                color: #FFFFFF;
                border-radius: 4px;
                margin-top: 5px;
            }

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

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

            .strong-secure-pass {
                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 - www.pakainfo.com</h2><br/>        
            <label>Password:</label>
            <input type="password" name="secure-pass" id="secure-pass" class="form-control"/>
            <div id="secure-pass-strength-status"></div>        
      </div>
    </div>    
</body>
</html>

Don’t Miss : Password strength checker jQuery with progress bar

Also Read This πŸ‘‰   Ajax Autocomplete Live Search Suggestion using PHP MySQL

script.js

<script>
$(document).ready(function () {
  $("#secure-pass").on('keyup', function(){
    var number = /([0-9])/;
    var alphabets = /([a-zA-Z])/;
    var special_characters = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<])/;
    if ($('#secure-pass').val().length < 6) {
        $('#secure-pass-strength-status').removeClass();
        $('#secure-pass-strength-status').addClass('weak-secure-pass');
        $('#secure-pass-strength-status').html("Weak (should be atleast 6 characters.)");
    } else {
        if ($('#secure-pass').val().match(number) && $('#secure-pass').val().match(alphabets) && $('#secure-pass').val().match(special_characters)) {
            $('#secure-pass-strength-status').removeClass();
            $('#secure-pass-strength-status').addClass('strong-secure-pass');
            $('#secure-pass-strength-status').html("Strong");
        } else {
            $('#secure-pass-strength-status').removeClass();
            $('#secure-pass-strength-status').addClass('medium-secure-pass');
            $('#secure-pass-strength-status').html("Medium (should include alphabets, numbers and special characters or some combination.)");
        }
    }
  });
}); 
</script>

I hope you get an idea about password strength checker jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Also Read This πŸ‘‰   javascript countdown timer minutes seconds