JavaScript验证密码强度

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>

 

posted @ 2015-05-14 14:14  Suner  阅读(275)  评论(0)  编辑  收藏  举报