JavaScript的方法:
<script type="text/javascript">
window.onload = function () {
document.getElementById('txt').onkeydown = function () { //获取td
var tds = document.getElementById('tb').getElementsByTagName('td');
for (var i = 0; i < tds.length; i++) {
tds[i].style.backgroundColor = '#E6E6E6';
} var pwd = this.value; //获取密码
if (pwd.length > 0) {
var result = getPassWord(pwd);
if (result <= 1) {
//弱
tds[0].style.backgroundColor = 'red';
} else if (result == 2) {
//中
tds[0].style.backgroundColor = 'orange';
tds[1].style.backgroundColor = 'orange';
} else if (result == 3) {
//强
tds[0].style.backgroundColor = 'green';
tds[1].style.backgroundColor = 'green';
tds[2].style.backgroundColor = 'green';
} }
}
}
//利用正则表达式匹配相关字符串,返回密码的强度值
function getPassWord(pwdMsg) {
var lvl = 0;
/*
var reg = /\d/;
if (reg.test(pwdMsg)) {
lvl++;
};
*/
//密码中有数字加1
if (pwdMsg.match(/\d/)) {
lvl++;
}
//密码中有字符加1
if (pwdMsg.match(/[a-zA-Z]/)) {
lvl++;
}
//密码中有其他字符加1
if (pwdMsg.match(/^[0-9a-zA-Z]/)) {
lvl++;
}
//密码小于6位减一
if (pwdMsg.length <= 6) {
lvl--;
}
return lvl;
}
</script>
页面内容:
<input type="text" id="txt" name="name" value="" />
<table border="1" cellpadding="0" cellspacing="0" id="tb">
<tr>
<td>
弱
</td>
<td>
中
</td>
<td>
强
</td>
</tr>
</table>
简单的样式:
<style type="text/css">
td
{
width: 100px;
height: 25px;
background-color: #E6E6E6;
text-align: center;
}
</style>