首页
前端开发
Javascript
JavaScript表单密码强度与长度判断

JavaScript表单密码强度与长度判断

0 次浏览 0 条评论
rar
rar

表单里的密码强度判断逻辑，用 JS 写起来其实还挺顺手的。这份资源主要教你怎么用 JavaScript 在前端实时检测密码长度和复杂度，逻辑清晰、代码也好理解。基本思路就是用正则表达式和事件监听，动态反馈密码强弱，用户体验提升不少。

密码的长度判断，用password.length判断就够了，少于 8 个字符就提示用户，简单直接：

function checkLength(password) {
  if (password.length < 8>

复杂度这块就靠正则表达式了。大写、小写、数字、特殊字符，每类匹配一次，判断是否都包含：

function checkComplexity(password) {
  var hasUpper = /[A-Z]/.test(password);
  var hasLower = /[a-z]/.test(password);
  var hasDigit = /\d/.test(password);
  var hasSpecial = /[!@#$%^&*()_+\-=[\]{};':\"|,.<>/?]/.test(password);
  if (!hasUpper || !hasLower || !hasDigit || !hasSpecial) {
    return "密码需要包含大小写字母、数字和特殊字符";
  } else {
    return true;
  }
}

再配上实时反馈的监听器，比如oninput事件，每次用户改密码时就刷新提示：

document.getElementById("password").addEventListener("input", function () {
  var password = this.value;
  var lengthResult = checkLength(password);
  var complexityResult = checkComplexity(password);
  if (lengthResult === true && complexityResult === true) {
    document.getElementById("strength").innerText = "强";
  } else {
    document.getElementById("strength").innerText = "弱";
  }
});

嗯，如果你表单里需要做密码校验，这份代码可以直接拿来用，HTML、CSS、JS 都打包好了，结构清楚。想进一步拓展，也可以试试引入评分机制，像“弱”、“中”、“强”三档分级，用户更有参考价值。

顺手推荐几个扩展阅读的链接，想玩得花点的可以看看：

如果你在做注册页面或者后台用户管理，这种实时判断密码强度的功能，还是蛮值得加进去的，既安全又贴心。
rar 文件大小：25.58KB