<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
#tab1 tr td{
width:80px;
text-align:center;
background-color:gray;
}
</style>
<script type="text/javascript">
window.onload = function () {
var grade = 0;
document.getElementById('pwd').onkeyup = function () {
var txtPwd = document.getElementById('pwd').value;
jiangdu(txtPwd);
var tds = document.getElementById('tab1').getElementsByTagName('td');
for (var i = 0; i < tds.length; i++) {
tds[i].style.backgroundColor = 'gray';
}
switch (grade) {
case 1:
tds[0].style.backgroundColor = 'red';
break;
case 2:
tds[0].style.backgroundColor = 'yellow';
tds[1].style.backgroundColor = 'yellow';
break;
case 3:
tds[0].style.backgroundColor = 'blue';
tds[1].style.backgroundColor = 'blue';
tds[2].style.backgroundColor = 'blue';
break;
}
}
function jiangdu(userPwd) {
grade = 0;
if (userPwd.match(/\d+/)) {
grade++;
}
if (userPwd.match(/[a-z]+/)) {
grade++
}
if (userPwd.match(/[A-Z]+/)) {
grade++
}
}
}
</script>
</head>
<body>
请输入密码：<input type="text" id="pwd" />
<table id="tab1">
<tr>
<td>弱</td>
<td>中</td>
<td>强</td>
</tr>
</table>
<p>只做了简单判断同时包括数字、大小写为强</p>
</body>
</html>