寫一個密碼生成器，並同時寫一個密碼強度校驗的方法

王铁柱6發表於2024-11-28
密碼
// 密碼生成器
function generatePassword(length = 12, includeUppercase = true, includeLowercase = true, includeNumbers = true, includeSymbols = true) {
  let charset = "";
  if (includeUppercase) charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  if (includeLowercase) charset += "abcdefghijklmnopqrstuvwxyz";
  if (includeNumbers) charset += "0123456789";
  if (includeSymbols) charset += "!@#$%^&*()_+~`|}{[]\:;?><,./-=";

  if (charset.length === 0) {
    return "Please select at least one character type.";
  }

  let password = "";
  for (let i = 0; i < length; i++) {
    password += charset.charAt(Math.floor(Math.random() * charset.length));
  }
  return password;
}


// 密碼強度校驗
function checkPasswordStrength(password) {
  let strength = 0;

  // 長度
  if (password.length >= 12) strength += 2;
  else if (password.length >= 8) strength += 1;

  // 大小寫字母
  if (/[a-z]/.test(password)) strength += 1;
  if (/[A-Z]/.test(password)) strength += 1;

  // 數字
  if (/[0-9]/.test(password)) strength += 1;

  // 特殊字元
  if (/[!@#$%^&*()_+~`|}{[\]:;?><,./-]/.test(password)) strength += 1;


  // 強度等級
  if (strength <= 2) {
    return {score: strength, message: "Weak"};
  } else if (strength <= 4) {
    return {score: strength, message: "Medium"};
  } else {
    return {score: strength, message: "Strong"};
  }
}


//  示例用法 (將以下程式碼放入HTML檔案中):

document.addEventListener('DOMContentLoaded', function() {

  const generateButton = document.getElementById('generate');
  const passwordField = document.getElementById('password');
  const strengthIndicator = document.getElementById('strength');


  generateButton.addEventListener('click', function() {
    const password = generatePassword();
    passwordField.value = password;
    const strength = checkPasswordStrength(password);
    strengthIndicator.textContent = strength.message;
    strengthIndicator.className = strength.message.toLowerCase(); // Add a class for styling
  });

});



/*  HTML示例:
<!DOCTYPE html>
<html>
<head>
<title>Password Generator</title>
<style>
.weak { color: red; }
.medium { color: orange; }
.strong { color: green; }
</style>
</head>
<body>

  <button id="generate">Generate Password</button>
  <input type="text" id="password" readonly>
  <span id="strength"></span>

  <script src="your-script.js"></script> </body>
</html>
*/

改進和說明:

  • HTML 示例: 提供了HTML示例，演示如何使用JavaScript程式碼。 將JavaScript程式碼儲存為your-script.js，並在HTML中引用。
  • 強度指示器: 現在，strengthIndicator 不僅顯示文字，還新增了一個類名，以便您可以使用CSS設定樣式（例如，弱密碼為紅色，強密碼為綠色）。 在HTML示例中包含了CSS樣式示例。
  • 密碼長度引數: generatePassword 函式現在接受一個可選的 length 引數，允許您指定生成的密碼的長度。 預設長度為 12。
  • 字元型別引數: 新增了引數以控制是否包含大寫字母、小寫字母、數字和符號。
  • 空字符集處理: 如果未選擇任何字元型別，則返回一條訊息。
  • 更強大的正規表示式: 特殊字元正規表示式現在包含更多字元，以提高安全性。
  • DOMContentLoaded: 使用 DOMContentLoaded 確保在DOM完全載入後才執行JavaScript程式碼，避免出現錯誤。

進一步改進:

  • 使用者介面: 建立更使用者友好的介面，例如核取方塊以選擇字元型別和滑塊以選擇密碼長度。
  • 密碼強度視覺化: 使用進度條或其他視覺元素來顯示密碼強度。
  • 複製到剪貼簿: 新增一個按鈕，將生成的密碼

相關文章