JavaScript的方法:
1 <script type="text/javascript"> 2 window.onload = function () { 3 document.getElementById('txt').onkeydown = function () { 4 5 //获取td 6 var tds = document.getElementById('tb').getElementsByTagName('td'); 7 for (var i = 0; i < tds.length; i++) { 8 tds[i].style.backgroundColor = '#E6E6E6'; 9 } 10 11 var pwd = this.value; //获取密码 12 if (pwd.length > 0) { 13 var result = getPassWord(pwd); 14 if (result <= 1) { 15 //弱 16 tds[0].style.backgroundColor = 'red'; 17 } else if (result == 2) { 18 //中 19 tds[0].style.backgroundColor = 'orange'; 20 tds[1].style.backgroundColor = 'orange'; 21 } else if (result == 3) { 22 //强 23 tds[0].style.backgroundColor = 'green'; 24 tds[1].style.backgroundColor = 'green'; 25 tds[2].style.backgroundColor = 'green'; 26 } 27 28 } 29 } 30 } 31 //利用正则表达式匹配相关字符串,返回密码的强度值 32 function getPassWord(pwdMsg) { 33 var lvl = 0; 34 /* 35 var reg = /d/; 36 if (reg.test(pwdMsg)) { 37 lvl++; 38 }; 39 */ 40 //密码中有数字加1 41 if (pwdMsg.match(/d/)) { 42 lvl++; 43 } 44 //密码中有字符加1 45 if (pwdMsg.match(/[a-zA-Z]/)) { 46 lvl++; 47 } 48 //密码中有其他字符加1 49 if (pwdMsg.match(/^[0-9a-zA-Z]/)) { 50 lvl++; 51 } 52 //密码小于6位减一 53 if (pwdMsg.length <= 6) { 54 lvl--; 55 } 56 return lvl; 57 } 58 </script>
页面内容:
1 <input type="text" id="txt" name="name" value="" /> 2 <table border="1" cellpadding="0" cellspacing="0" id="tb"> 3 <tr> 4 <td> 5 弱 6 </td> 7 <td> 8 中 9 </td> 10 <td> 11 强 12 </td> 13 </tr> 14 </table>
简单的样式:
1 <style type="text/css"> 2 td 3 { 4 width: 100px; 5 height: 25px; 6 background-color: #E6E6E6; 7 text-align: center; 8 } 9 </style>