判断旧密码是否输入正确
同时判断输入的新密码是否太简单可视化返回难易信息
思路很简单:
修改密码绑定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";
}
})
简单实现