JS 密码弱中强显示

2023-02-11 21:08:15

<!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>

码农公寓

相关文章