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

      <link href="" rel="stylesheet">
        <script src=""></script>
        <script src=""></script>
        <title>How to check password strength in jQuery -</title>
            #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;
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
          <h2>How to check password strength in jQuery -</h2><br/>        
            <input type="password" name="password" id="password" class="form-control"/>
            <div id="password-strength-status"></div>        
$(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').html("Weak (should be atleast 6 characters.)");
    } else {
        if ($('#password').val().match(number) && $('#password').val().match(alphabets) && $('#password').val().match(special_characters)) {
        } else {
            $('#password-strength-status').html("Medium (should include alphabets, numbers and special characters or some combination.)");



And finally, you will get output like the below screen print.



You might also like:

Recommended Post
Featured Post
How To Delete Multiple Records Using Checkbox In Laravel
How To Delete Multiple Records...

In this example, I will show you how to delete multiple records using a single checkbox or how to delete multi...

Read More


Carbon Add Days To Date In Laravel 9
Carbon Add Days To Date In Lar...

In this article, we will see carbon add day and add days to date in laravel 9. Carbon provides the addDay() and add...

Read More


Node.js MySQL Insert Record
Node.js MySQL Insert Record

In this tutorial we will see how to insert data into MySQL table using Node.js. In previous node .js article I will give...

Read More


Send Email In Laravel
Send Email In Laravel

In this article, we will explore the process of sending emails in Laravel, covering versions 6, 7, 8, 9, and 10. Email f...

Read More