<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<style type="text/css">
#tbl1 td {
width:50px;
height:20px;
border:1px solid black;
text-align:center;
}
</style>
请输入密码:<input id="txtPwd"/>
<table id="tbl1">
<tr>
<td id="td1">弱</td>
<td id="td2">中</td>
<td id="td3">强</td>
</tr>
</table>
<script type="text/javascript">
window.onload = function () {
document.getElementById('txtPwd').onkeyup = function () {
//初始化表格背景颜色
var tdObjs = document.getElementsByTagName('td');
for (var i = 0; i < tdObjs.length; i++) {
tdObjs[i].style.backgroundColor = 'white';
}
//得到当前用户输入的密码
var strPwd = this.value.trim();
//判断密码强度
var resultLev = JudgePwdStrong(strPwd);
//根据密码强度等级来改变颜色
switch (resultLev) {
case 1:
case 2: document.getElementById('td1').style.backgroundColor = 'red';
break;
case 3:
case 4: document.getElementById('td1').style.backgroundColor = '#FFAA00';
document.getElementById('td2').style.backgroundColor = '#FFAA00';
break;
case 5: document.getElementById('td1').style.backgroundColor = 'green';
document.getElementById('td2').style.backgroundColor = 'green';
document.getElementById('td3').style.backgroundColor = 'green';
break;
}
};
};
function JudgePwdStrong(pwd) {
var lev = 0;
//如果密码中存在数字,强度加一
if (pwd.match(/\d+/g)) {
lev++;
}
//如果密码中存在小写字母,强度加一
if (pwd.match(/[a-z]+/g)) {
lev++;
}
//如果密码中存在大写字母,强度加一
if (pwd.match(/[A-Z]+/g)) {
lev++;
}
//如果密码中存在特殊字符,强度加一
if (pwd.match(/[^a-zA-Z0-9]+/g)) {
lev++;
}
//如果密码长度超过8,强度加一
if (pwd.length > 8) {
lev++;
}
return lev;
}
</script>
</body>
</html>
使用正则表达式来判断密码强度
最新推荐文章于 2024-07-01 02:50:59 发布