Maison > Article > interface Web > Vérificateur de mot de passe - JavaScript

Vérificateur de mot de passe - JavaScript

Mary-Kate Olsenoriginal: 2024-10-24 06:57:30712parcourir

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>

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!

JavaScript html for this

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter une pagination efficace dans MongoDB à l'aide de _id et Forward Paging ?Article suivant：Comment implémenter une pagination efficace dans MongoDB à l'aide de _id et Forward Paging ?

Articles Liés

Voir plus