JavaScript 中怎么实现表单密码强度实时检测功能-js教程-PHP中文网

javascript表单密码强度实时检测需监听input事件，按长度、字符类型等加权打分（0–100），并结合颜色与文案即时反馈：0–30红、31–60橙、61–80黄、81–100绿，同时处理粘贴、空值及unicode兼容性，且前端校验不可替代服务端验证。

javascript 中怎么实现表单密码强度实时检测功能

在 JavaScript 中实现表单密码强度实时检测，核心是监听输入事件、按规则动态评分，并即时反馈结果。关键不在于复杂算法，而在于规则清晰、响应及时、提示友好。

定义可量化的强度规则

密码强度通常从长度、大小写字母、数字、特殊字符、常见弱密码等维度判断。建议用加权打分（如 0–100 分），而非简单“强/中/弱”三级：

≥8 位：+20 分；≥12 位：再 +10 分
含小写字母：+15 分；含大写字母：+15 分
含数字：+15 分；含 ASCII 特殊字符（如 !@#$%^&*）：+15 分
不含常见弱密码（如 "123456"、"password"、"admin"）：+10 分
无连续重复字符（如 "aaa"、"111"）：+10 分

监听输入并实时计算分数

使用 input 事件（非 change），确保用户每敲一个键都触发检测：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

const passwordInput = document.getElementById('password');
const strengthBar = document.getElementById('strength-bar');
const strengthText = document.getElementById('strength-text');

passwordInput.addEventListener('input', function () {
  const pwd = this.value;
  let score = 0;

  // 长度分
  if (pwd.length >= 8) score += 20;
  if (pwd.length >= 12) score += 10;

  // 字符类型分
  if (/[a-z]/.test(pwd)) score += 15;
  if (/[A-Z]/.test(pwd)) score += 15;
  if (/\d/.test(pwd)) score += 15;
  if (/[^A-Za-z0-9\s]/.test(pwd)) score += 15;

  // 弱密码黑名单（可扩展为数组或正则）
  const weakList = ['123456', 'password', 'admin', 'qwerty', 'abc123'];
  if (!weakList.some(word => pwd.toLowerCase().includes(word))) score += 10;

  // 连续重复字符检测（如 "aaabbb" 中的 "aaa"）
  if (!/(.)\1{2,}/.test(pwd)) score += 10;

  // 更新 UI
  updateStrengthUI(score);
});