Javascript-简单密码强度指示器

我正试图通过更改html5进度元素的值，用javascript创建一个简单的密码强度指示器，但是出现了一些错误，有人能指出错误吗？控制台显示零错误，这一定与更改函数未绑定到ID为“pwd”的输入有关

JavaScript密码表
addEventListener（'load'，function（））{
var password=document.getElementById（“pwd”）；
password.addEventListener（'change'，function（））{
//如果密码长度为零，则重置
如果（password.length==0）{
document.getElementById（“progresslabel”）.innerHTML=“”；
document.getElementById（“progress”）.value=“0”；
返回；
}
//密码要求
var match=新数组（）；
match.push（“[$@$！%*#？&]”；//特殊字符
match.push（“[A-Z]”；//大写
match.push（“[0-9]”；//数字
match.push（“[a-z]”；//小写
//检查进度
var-prog=0；
对于（变量i=0；i2&&password.length>7）{
prog++；
}
//展示它
var progress=“”；
var-strength=“”；
开关（程序）{
案例0：
案例1：
案例2：
强度=“25%”；
progress=“25”；
打破
案例3：
强度=“50%”；
进度=“50”；
打破
案例4：
强度=“75%”；
progress=“75”；
打破
案例5：
strong=“100%-密码强度良好”；
进度=“100”；
打破
}
document.getElementById（“progresslabel”）.innerHTML=强度；
document.getElementById（“progress”）.value=progress；
});
});
密码：
70

一些问题：

您应该听

keyup

方法，而不是

change

事件，以便在密码更改时重新评估强度（

change

仅在模糊时触发）

password

引用

pwd

元素，但您的代码将其视为输入值-我在函数中添加了一个

pwd

变量，该变量是

password

元素的值

字符测试可以简化-我使用的

reduce

在功能上等同于您的代码

var password=document.getElementById（“pwd”）；
password.addEventListener（'keyup'，function（）{
var pwd=password.value
//如果密码长度为零，则重置
如果（pwd.length==0）{
document.getElementById（“progresslabel”）.innerHTML=“”；
document.getElementById（“progress”）.value=“0”；
返回；
}
//检查进度
var prog=[/[$@$！%*#？&]/，/[A-Z]/，/[0-9]/，/[A-Z]/]
.reduce（（memo，test）=>memo+test.test（pwd），0）；
//长度必须至少为8个字符
如果（程序>2&&pwd.length>7）{
prog++；
}
//展示它
var progress=“”；
var-strength=“”；
开关（程序）{
案例0：
案例1：
案例2：
强度=“25%”；
progress=“25”；
打破
案例3：
强度=“50%”；
进度=“50”；
打破
案例4：
强度=“75%”；
progress=“75”；
打破
案例5：
strong=“100%-密码强度良好”；
进度=“100”；
打破
}
document.getElementById（“progresslabel”）.innerHTML=强度；
document.getElementById（“progress”）.value=progress；
});

密码：
70
一些问题：

您应该听
keyup
方法，而不是
change
事件，以便在密码更改时重新评估强度（
change
仅在模糊时触发）
password
引用
pwd
元素，但您的代码将其视为输入值-我在函数中添加了一个
pwd
变量，该变量是
password
元素的值
字符测试可以简化-我使用的
reduce
在功能上等同于您的代码

var password=document.getElementById（“pwd”）；
password.addEventListener（'keyup'，function（）{
var pwd=password.value
//如果密码长度为零，则重置
如果（pwd.length==0）{
document.getElementById（“progresslabel”）.innerHTML=“”；
document.getElementById（“progress”）.value=“0”；
返回；
}
//检查进度
var prog=[/[$@$！%*#？&]/，/[A-Z]/，/[0-9]/，/[A-Z]/]
.reduce（（memo，test）=>memo+test.test（pwd），0）；
//长度必须至少为8个字符
如果（程序>2&&pwd.length>7）{
prog++；
}
//展示它
var progress=“”；
var-strength=“”；
开关（程序）{
案例0：
案例1：
案例2：
强度=“25%”；
progress=“25”；
打破
案例3：
强度=“50%”；
进度=“50”；
打破
案例4：
强度=“75%”；
progress=“75”；
打破
案例5：
strong=“100%-密码强度良好”；
进度=“100”；
打破
}
document.getElementById（“progresslabel”）.innerHTML=强度；
document.getElementById（“progress”）.value=progress；
});

密码：
70


jQuery.strength=函数（元素、密码）{
var desc=[{'width'：'0px'}，{'width'：'20%}，{'width'：'40%}，{'width'：'60%}，{'width'：'80%'}，{'width'：'100%}）；
var descClass=[''，'进度条危险'，'进度条危险'，'进度条警告'，'进度条成功'，'进度条成功']；
var得分=0；
如果（password.length>6）{
分数++；
}
if（（password.match（/[a-z]/）&&（password.match（/[a-z]/））{
分数++；
}
if（password.match（/\d+/））{
分数++；
}
if（password.match（/.[！，@，#，$，%，^，&，*，？，，~，-，（，）]/）{
分数++；
}
if（password.le）