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

// 密码生成器
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 @   王铁柱6  阅读(20)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
点击右上角即可分享
微信分享提示