How To Check Password Length Using JQuery With Example

admin_img Posted By Bajarangi soft , Posted On 16-10-2020

In Jquery we can check the password length like at least 6 character should be there, check for special character and it should content alphabetic and numeric character .So today we discuss how to check password length using jquery

How To Check Password Length Using JQuery With Example

Step 1:Create index.html file and implement below code.

 

<div name="frmCheckPassword" id="frmCheckPassword">
    <label>Password:</label>
    <input type="password" name="password" id="password" class="demoInputBox" onKeyUp="checkPasswordStrength();" />
    <div id="password-strength-status"></div>
</div>


Step 2:Implement jQuery to check password.
 
<script>
    function checkPasswordStrength() {
        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.)");
            }
        }
    }
</script>


Complete Code For Checking Password Length Using JQuery
 
<!DOCTYPE html>
<html>
<head>
    <title>How To Check Password Length Using JQuery With Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
    body {
        background: black;
    }
    .medium-password {
        color:#b7d60a
    }

    .weak-password {
        color:#ce1d14
    }

    .strong-password {
        color:#12CC1A;
    }
</style>
<body>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: White;">Check Password Length Using JQuery</h1>
    </div>
    <br>
    <div class="col-md-2"></div>
       <div class="col-md-8">
           <div class="well">
               <div name="frmCheckPassword" id="frmCheckPassword">
                   <label>Password:</label>
                   <input type="password" name="password" id="password" class="demoInputBox" onKeyUp="checkPasswordStrength();" />
                   <div id="password-strength-status"></div>
               </div>
           </div>
       </div>
    <div class="col-md-2"></div>
</div>
</body>
</html>
<script>
    function checkPasswordStrength() {
        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.)");
            }
        }
    }
</script>

Related Post