此程式在瀏覽器中開啟一個視窗。使用者輸入密碼及其強度等級。它從包含 72 行程式碼的單一 .html 檔案運行,包括 HTML 結構和嵌入式 JavaScript 功能。
這個例子是為了教學如何編碼。該程序是基本的,並提供簡單的、基於規則的密碼強度檢查。它應該被視為初步工具,而不是全面的安全措施。
<!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>
本‧桑托拉 - 2024 年 10 月
以上是密碼檢查器 - JavaScript的詳細內容。更多資訊請關注PHP中文網其他相關文章!