修改密码，判断旧密码并且显示新密码的难易程度

版权声明： https://blog.csdn.net/LMlikoSakura/article/details/82881445

判断旧密码是否输入正确

同时判断输入的新密码是否太简单可视化返回难易信息

思路很简单：

修改密码绑定keyup事件获取登陆时候的原密码进行判断

使用keyup事件就可以实时的反应密码的情况

对密码难易程度的判断就是使用正则表达式

没有就是空白，纯数字就是最简单危险的红色，加上英文就是一般存在风险的橙色，加上其他符号就是安全的绿色

代码如下：

var oldpsw = document.getElementById('oldpsw');
oldpsw.addEventListener('keyup',function (){
  var psw = document.getElementById('oldpsw').value;
  var tips = document.getElementById('tips');
  if(psw!=localStorage.password){
    tips.innerText = '原密码错误，请检查';    
  }else{
    tips.innerText = '原密码正确，请修改密码';
  }
})
var newpsw = document.getElementById('newpsw');
newpsw.addEventListener('keyup',function (){
  var p1 = /[0-9]/;
  var p2 = /[a-z]/i;
  var p3 = new RegExp(
    "[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]"
  );
  var weak = document.getElementById("weak");
  var mid = document.getElementById("middle");
  var str = document.getElementById("strong");
  var psw = document.getElementById('newpsw').value;
  localStorage.passwodr = psw;
  console.log(psw);
  if (p1.test(psw)) {
    weak.style.background = "red";
  }
  if (p2.test(psw)) {
    weak.style.background = "red";
    mid.style.background = "orange";
  }
  if (p3.test(psw)) {
    weak.style.background = "red";
    mid.style.background = "orange";
    str.style.background = "green";
  }
  if (psw.length < 4) {
    weak.style.background = "red";
    mid.style.background = "white";
    str.style.background = "white";
  }
  if (psw.length == 0) {
    weak.style.background = "white";
    mid.style.background = "white";
    str.style.background = "white";
  }
})

简单实现