Vérificateur de mot de passe - JavaScript-js tutoriel-php.cn

Vérificateur de mot de passe - JavaScript

Mary-Kate Olsen

Libérer： 2024-10-24 06:57:30

original

711 Les gens l'ont consulté

Password Checker - JavaScript

Ce programme ouvre une fenêtre dans le navigateur. L'utilisateur saisit un mot de passe et son niveau de force. Il s'exécute à partir d'un seul fichier .html contenant 72 lignes de code, comprenant à la fois la structure HTML et le JavaScript intégré pour les fonctionnalités.

Cet exemple a pour but d'apprendre à coder. Le programme est basique et fournit une vérification simple de la force du mot de passe, basée sur des règles. Il doit être considéré comme un outil préliminaire et non comme une mesure de sécurité complète.

<!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>

Copier après la connexion

Ben Santora - Octobre 2024

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!