写一个密码生成器，并同时写一个密码强度校验的方法

// 密码生成器
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代码，避免出现错误。

进一步改进:

用户界面: 创建更用户友好的界面，例如复选框以选择字符类型和滑块以选择密码长度。
密码强度可视化: 使用进度条或其他视觉元素来显示密码强度。
复制到剪贴板: 添加一个按钮，将生成的密码

posted @ 2024-11-28 05:02 王铁柱6 阅读(20) 评论(0) 编辑收藏举报

努力加载评论中...

刷新页面返回顶部

写一个密码生成器，并同时写一个密码强度校验的方法

公告