How To Check Password Strength Using JQuery

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

In this article, we will see how to check password strength using jquery. here we will check whether password strength is fulfill min character requirements or not. we will give you examples of how to check password size using javascript and jquery password strength. password is the most important part of authentication, many times you can see error messages like entering a valid password or password must be at least 6 characters, etc.

So, let's see a password strength check using regex.

jQuery Password Strength Check Example

<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 the below screen print.

how_to_check_passowrd_strength_in_jquery

 


You might also like:

Recommended Post
Featured Post
Laravel 9 User Roles and Permissions Without Package
Laravel 9 User Roles and Permi...

In this article, we will see laravel 9 user roles and permissions without package. Roles and permissions are an imp...

Read More

Apr-14-2022

Laravel 8 Authentication using Jetstream Example
Laravel 8 Authentication using...

In this article, we will discuss laravel 8 authentication with jetstream. This post will give you a simpl...

Read More

Nov-12-2020

Laravel 8 Class NumberFormatter Not Found
Laravel 8 Class NumberFormatte...

In this example we will see example of laravel 8 class numberformatter not found. For numberformatter we need PHP 5...

Read More

Dec-27-2021

Laravel 8 Socialite Login with Facebook Account
Laravel 8 Socialite Login with...

In this tutorial, we will learn laravel 8 socialite login with facebook account, as you all know currently many websites...

Read More

Mar-08-2021