Passwort-Checker – JavaScript-js-Tutorial-php.cn

Passwort-Checker – JavaScript

Mary-Kate Olsen

Freigeben： 2024-10-24 06:57:30

Original

711 Leute haben es durchsucht

Password Checker - JavaScript

Dieses Programm öffnet ein Fenster im Browser. Der Benutzer gibt ein Passwort mit seiner Stärke ein. Es wird aus einer einzigen .html-Datei ausgeführt, die 72 Codezeilen enthält, einschließlich der HTML-Struktur und eingebettetem JavaScript für die Funktionalität.

Dieses Beispiel dient dazu, das Programmieren zu lehren. Das Programm ist einfach und bietet eine einfache, regelbasierte Überprüfung der Passwortstärke. Es sollte als vorläufiges Tool und nicht als umfassende Sicherheitsmaßnahme betrachtet werden.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Strength Checker</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: flex-start; /* Align the container at the top */
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }

        .container {
            text-align: center;
            background-color: white;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 220px; /* Small width similar to audio player */
            height: auto; /* Let height adjust based on content */
            margin-top: 20vh; /* Moves the container down by 20% of the viewport height */
        }

        input[type="password"] {
            padding: 5px;
            width: 180px; /* Keep it small */
            margin-top: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        #strength {
            margin-top: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Password Checker</h1>
        <input type="password" id="password" placeholder="Enter password">
        <div id="strength">Strength: </div>
    </div>

    <script>
        const passwordInput = document.getElementById('password');
        const strengthDisplay = document.getElementById('strength');

        passwordInput.addEventListener('input', function() {
            const password = passwordInput.value;
            const strength = calculatePasswordStrength(password);
            strengthDisplay.textContent = `Strength: ${strength}`;
        });

        function calculatePasswordStrength(password) {
            let strength = 'Weak';
            if (password.length >= 8) {
                strength = 'Medium';
            }
            if (/[A-Z]/.test(password) && /[0-9]/.test(password) && /[^A-Za-z0-9]/.test(password)) {
                strength = 'Strong';
            }
            return strength;
        }
    </script>
</body>
</html>

Nach dem Login kopieren

Ben Santora – Oktober 2024

Das obige ist der detaillierte Inhalt vonPasswort-Checker – JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!