How to implement a password strength meter using jQuery



Image not found!!

Implementing a password strength meter using jQuery involves evaluating the complexity of a given password and providing visual feedback to the user. Here's a simple example to get you started:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Strength Meter</title>
    <style>
        #password-strength-meter {
            margin-top: 10px;
        }

        .strength-indicator {
            width: 20px;
            height: 20px;
            margin: 0 3px;
            display: inline-block;
            border-radius: 50%;
        }

        .weak {
            background-color: #FF6347; /* Tomato */
        }

        .medium {
            background-color: #FFD700; /* Gold */
        }

        .strong {
            background-color: #32CD32; /* LimeGreen */
        }
    </style>
</head>
<body>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" oninput="checkPasswordStrength(this.value)">
    <div id="password-strength-meter">
        <span class="strength-indicator weak"></span>
        <span class="strength-indicator medium"></span>
        <span class="strength-indicator strong"></span>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        function checkPasswordStrength(password) {
            var strength = 0;

            // Check length
            if (password.length >= 8) {
                strength += 1;
            }

            // Check for both uppercase and lowercase letters
            if (/[a-z]/.test(password) && /[A-Z]/.test(password)) {
                strength += 1;
            }

            // Check for at least one number
            if (/\d/.test(password)) {
                strength += 1;
            }

            // Check for at least one special character
            if (/[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]/.test(password)) {
                strength += 1;
            }

            updateStrengthIndicator(strength);
        }

        function updateStrengthIndicator(strength) {
            var indicators = $('.strength-indicator');

            indicators.removeClass('weak medium strong');

            if (strength === 0) {
                // Weak
                indicators.slice(0, 1).addClass('weak');
            } else if (strength === 1 || strength === 2) {
                // Medium
                indicators.slice(0, 2).addClass('medium');
            } else {
                // Strong
                indicators.addClass('strong');
            }
        }
    </script>

</body>
</html>

This example includes a simple password input field and a password strength meter represented by three colored circles. The strength of the password is determined based on its length, inclusion of uppercase and lowercase letters, numbers, and special characters. The circles change color to reflect the strength of the password. You can further customize and enhance this implementation based on your specific requirements.

Category List