原生js实现密码强度验证功能

密码强度验证是一种常用的前端表单验证功能，实现起来并不复杂。下面是使用原生JS实现密码强度验证的攻略：

1. 分析实现思路

实现密码强度验证的关键是定义密码强度的级别和判断密码的强度。一般情况下，密码强度可以分为“弱”、“中”和“强”三个等级，判断密码的强度需要根据密码的长度、包含的字符类型、是否包含特殊字符等多个因素来综合评估。

2. 编写HTML代码

<input type="password" name="password" id="password" placeholder="Password">
<div id="pwd_strength"></div>

上述HTML代码中包含一个密码输入框和一个用于显示密码强度的文本框。

3. 编写JS代码

3.1 获取密码输入框的值

var password = document.getElementById('password').value.trim();

3.2 判断密码强度

// 定义密码强度等级
var LEVEL_WEAK = 1;
var LEVEL_MEDIUM = 2;
var LEVEL_STRONG = 3;

// 定义判断密码强度的函数
function checkPasswordLevel(password) {
  var level = LEVEL_WEAK;
  if (password.length >= 6 && password.match(/([a-z])/) && password.match(/([A-Z])/) && password.match(/([0-9])/) && password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) {
    level = LEVEL_STRONG;
  } else if (password.length >= 6 && ((password.match(/([a-z])/) && password.match(/([A-Z])/)) || (password.match(/([a-z])/) && password.match(/([0-9])/)) || (password.match(/([A-Z])/) && password.match(/([0-9])/)))) {
    level = LEVEL_MEDIUM;
  }
  return level;
}

上述代码中定义了三个密码强度等级常量，分别表示“弱”、“中”和“强”三个等级。checkPasswordLevel函数用于判断密码的强度，根据密码的长度、包含的字符类型、是否包含特殊字符等多个因素来判断密码的强度。

3.3 显示密码强度

var pwd_strength = document.getElementById('pwd_strength');
pwd_strength.innerHTML = '';
if (password !== '') {
  var level = checkPasswordLevel(password);
  if (level === LEVEL_WEAK) {
    pwd_strength.innerHTML = '弱';
    pwd_strength.style.color = 'red';
  } else if (level === LEVEL_MEDIUM) {
    pwd_strength.innerHTML = '中';
    pwd_strength.style.color = 'orange';
  } else if (level === LEVEL_STRONG) {
    pwd_strength.innerHTML = '强';
    pwd_strength.style.color = 'green';
  }
}

上述代码中通过调用checkPasswordLevel函数来获取当前密码的强度等级，根据等级来显示密码强度，同时设置文本颜色表示强度等级。如果密码输入框为空，则密码强度文本框不显示。

4. 示例说明

下面是两个示例：

4.1 示例1

假设输入的密码为“abcd”，则显示密码强度为“弱”，颜色为红色。

4.2 示例2

假设输入的密码为“Abc123@”，则显示密码强度为“强”，颜色为绿色。

5. 总结

上述就是使用原生JS实现密码强度验证功能的完整攻略。在实际项目中可以根据自己的需求进行相应的调整和优化。