<!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 && value.match(/[0-9]/) && value.match(/[a-z]/) && value.match(/[A-Z]/) ){ return 3; } return 2; } //1 创建一个定时器，每个100毫秒检查一下密码的强度 setInterval(function(){ var passwordElement = document.getElementById("password"); var passwordLevel = checkPassword(passwordElement.value); //2 如果检查结果是弱，就改变弱单元格的背景色... switch (passwordLevel){ 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="#ffff6f"; document.getElementById("td2").style.backgroundColor="#ffff6f"; document.getElementById("td3").style.backgroundColor=null; break; } case 3:{ document.getElementById("td1").style.backgroundColor="#a8ff24"; document.getElementById("td2").style.backgroundColor="#a8ff24"; document.getElementById("td3").style.backgroundColor="#a8ff24"; break; } } },100); </script>