<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
td
{
80px;
height: 25px;
text-align: center;
background-color: Gray;
}
</style>
<script type="text/javascript">
function setPwdColor(curPwd) {
//1.判断用户的密码强度
var level = getPwdQiangDu(curPwd.value);
//1.2获取表格中的所有单元格
var tds = document.getElementById('tb').getElementsByTagName('td');
for (var i = 0; i < tds.length; i++) {
tds[i].style.backgroundColor = 'gray';
}
if (curPwd.value != null && curPwd.value.length > 0) {
//2.根据用户的密码的强度来设置表格的颜色。
if (level <= 1) {
tds[0].style.backgroundColor = 'red';
} else if (level <= 2) {
tds[0].style.backgroundColor = 'orange';
tds[1].style.backgroundColor = 'orange';
} else {
tds[0].style.backgroundColor = 'green';
tds[1].style.backgroundColor = 'green';
tds[2].style.backgroundColor = 'green';
}
}
}
//判断用户的密码的强度级别
function getPwdQiangDu(val) {
var lvl = 0;
//如果密码中包含数字则，强度+1
if (val.match(/[0-9]/) != null) {
lvl++;
}
//如果密码中包含字母，强度+1
if (val.match(/[a-z]/i) != null) {
lvl++;
}
//如果密码中包含非数字和字母的其他字符，则强度+1
if (val.match(/[^a-z0-9]/i) != null) {
lvl++;
}
//如果长度小于6则，强度-1
if (val.length < 6) {
lvl--;
}
return lvl;
}
</script>
</head>
<body>
请输入密码：<input onkeyup="setPwdColor(this);" />
<table id="tb" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
弱
</td>
<td>
中
</td>
<td>
强
</td>
</tr>
</table>
</body>
</html>