<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title></title>
<style type="text/css">
#table td{
width:40px;
height:19px;
background-color: #F3F3F3;
border:1px solid #D0D0D0;
color:#BBBBBB;
line-height: 9px;
}
</style>
</head>
<body>
<form>
<label for="password">密码:</label>
<input id="password" type="password" name="password"/>
<table id="table" border="0" cellpadding="0" cellspacing="0" style="display: inline-table;">
<tr align="center">
<td id="td1">弱</td>
<td id="td2">中</td>
<td id="td3">强</td>
</tr>
</table>
</form>
</body>
</html>
<script type="text/javascript">
/*密码强度规则:
弱:强度为1, 密码长度小于6位
中:强度为2
强:强度为3,长度大于等于8,包含小写大写字母
*/
//申明一个函数检查密码强度
function checkPassword(value){
if(!value){
return 1;
}
if(value.length<6){
return 1;
}
/*if(value.length>=8 && /[0,9]/.test(value)){
}*/
if(value.length>=8 && value.match(/[0-9]/) && value.match(/[a-z]/) &&value.match(/[A-Z]/)){
return 3;
}
return 2;
}
setInterval(function () {
var passwordElement = document.getElementById("password");
var level = checkPassword(passwordElement.value);
switch(level){
case 1:{
document.getElementById("td1").style.backgroundColor="#ff8040";
document.getElementById("td2").style.backgroundColor=null;
document.getElementById("td3").style.backgroundColor=null;
break;
}
case 2:{
document.getElementById("td1").style.backgroundColor="#ff8040";
document.getElementById("td2").style.backgroundColor="#ffff6f";
document.getElementById("td3").style.backgroundColor=null;
break;
}
case 3:{
document.getElementById("td1").style.backgroundColor="#ff8040";
document.getElementById("td2").style.backgroundColor="#ffff6f";
document.getElementById("td3").style.backgroundColor="#a8ff24";
break;
}
}
},100)
//创建定时器,100毫秒检查密码强度
</script>
Dom 密码强度检查
最新推荐文章于 2024-07-09 12:53:34 发布