<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PK Password Match</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }

        #pk-password-strength {
            font-weight: bold;
        }

        #pk-password-match {
            color: green;
        }

        #pk-password-mismatch {
            color: red;
        }

        .pk-progress-container {
            height: 20px;
            margin-top: 10px;
            background-color: #ccc;
            transition: width 0.3s ease-in-out;
            position: relative;
            overflow: hidden;
        }

        #pk-strength-bar {
            height: 100%;
            width: 0;
            background-color: green;
        }

        form {
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 20px;
            width: 300px;
            margin: 0 auto;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        input[type="password"] {
            width: 95%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        #pk-submit-button {
            width: 100%;
            padding: 8px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }

        #pk-submit-button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <form>
        <label for="pk-password1">Password:</label>
        <input type="password" id="pk-password1" name="password1" oninput="pkCheckStrength(); pkCheckPasswordMatch()">
        <br>
        <label for="pk-password2">Confirm Password:</label>
        <input type="password" id="pk-password2" name="password2" oninput="pkCheckPasswordMatch()">
        <br>
        <div id="pk-password-match"></div>
        <div id="pk-password-strength"></div>
        <div class="pk-progress-container">
            <div id="pk-strength-bar"></div>
        </div><br>
        <button id="pk-submit-button" type="submit" disabled>Submit</button>
    </form>

    <script>
        function pkCheckPasswordMatch() {
            const pkPassword1 = document.getElementById("pk-password1").value;
            const pkPassword2 = document.getElementById("pk-password2").value;
            const pkPasswordMatch = document.getElementById("pk-password-match");
            const pkSubmitButton = document.getElementById("pk-submit-button");

            if (pkPassword1 === pkPassword2 && pkPassword1 !== "" && pkPassword2 !== "") {
                pkPasswordMatch.textContent = "Passwords match: Yes";
                pkPasswordMatch.style.color = "green";
                pkSubmitButton.disabled = false;
            } else {
                pkPasswordMatch.textContent = "Passwords match: No";
                pkPasswordMatch.style.color = "red";
                pkSubmitButton.disabled = true;
            }
        }

        function pkCheckStrength() {
            const pkPassword = document.getElementById("pk-password1").value;
            const pkPasswordStrength = document.getElementById("pk-password-strength");
            const pkStrengthProgress = document.querySelector(".pk-progress-container");
            const pkStrengthBar = document.getElementById("pk-strength-bar");

            const pkUppercaseRegex = /[A-Z]/;
            const pkSymbolRegex = /[!@#$%^&*()_+{}\[\]:;<>,.?~\\-]/;
            const pkNumberRegex = /[0-9]/;

            const pkContainsUppercase = pkUppercaseRegex.test(pkPassword);
            const pkContainsSymbol = pkSymbolRegex.test(pkPassword);
            const pkContainsNumber = pkNumberRegex.test(pkPassword);

            let pkStrength = 0;

            if (pkContainsUppercase) pkStrength += 30;
            if (pkContainsSymbol) pkStrength += 30;
            if (pkContainsNumber) pkStrength += 20;

            if (pkPassword.length >= 8 && pkStrength >= 50) {
                pkStrength += 20;
            }

            if (pkStrength < 50) {
                pkPasswordStrength.textContent = "Password Strength: Weak";
                pkPasswordStrength.style.color = "red";
                pkStrengthBar.style.backgroundColor = "red";
            } else if (pkStrength < 80) {
                pkPasswordStrength.textContent = "Password Strength: Moderate";
                pkPasswordStrength.style.color = "orange";
                pkStrengthBar.style.backgroundColor = "orange";
            } else {
                pkPasswordStrength.textContent = "Password Strength: Strong";
                pkPasswordStrength.style.color = "green";
                pkStrengthBar.style.backgroundColor = "green";
            }
            pkStrengthBar.style.width = pkStrength + "%";
        }
    </script>
</body>
</html>


Live Demo Click Here...