本文主要和大家分享js实现密码弱中强显示，主要以代码的方式和大家分享，希望能帮助到大家。
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script>
onload = function () {
var tds = document.getelementbyid('tb').getelementsbytagname('td');
document.getelementbyid('txt').onkeyup = function () {
for (var i = 0; i < tds.length; i++) {//防止输入正确密码后倒退删除时候出问题
tds[i].style.backgroundcolor = 'gray';
}
if (this.value.length>0) {
var result = checkpwd(this.value);
if (result<=1) {//弱
tds[0].style.backgroundcolor='red';
}else if (result==2) {//中
tds[0].style.backgroundcolor='green';
tds[1].style.backgroundcolor='green';
}else if (result==3) {//强
tds[0].style.backgroundcolor='blue';
tds[1].style.backgroundcolor='blue';
tds[2].style.backgroundcolor='blue';
}
}
}
}
function checkpwd(msg){ //判断含有数字字母特殊符号
var lvl = 0;
if (msg.match(/[0-9]/)){
lvl++;
}
if (msg.match(/[a-za-z]/)) {
lvl++;
}
if (msg.match(/[^0-9a-za-z]/)) {
lvl++;
}
if (msg.length<6) {
lvl--;
}
return lvl;
}
</script>
</head>
<body>
<input type="text" name="name" id="txt" />
<table id="tb" border="1" style="width:300px;height:35px;text-align:center;background-color:gray">
<tr>
<td>
弱
</td>
<td>
中
</td>
<td>
强
</td>
</tr>
</table>
</body>
</html>
相关推荐：
js正则实现密码强度验证功能
两种js实现密码强度的正则表达式方法
javascript 密码强度判断代码
以上就是js实现密码弱中强显示的详细内容。