18JavaScript 网页中的密码级别 

 1 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 2     <title></title>
 3     <script type="text/javascript">
 4        
 5         onload = function () {
 6             var tds = document.getElementById('tb').getElementsByTagName('td');
 7             var txtPwd = document.getElementById('txt');
 8             //键盘键入事件
 9             document.getElementById('txt').onkeyup = function () {
10                 var lv = checkPwd(this.value);
11                //查看密码的级别
12                 document.getElementById('txt2').value = lv;
13                 for (var i = 0; i < tds.length; i++) {
14                     tds[i].style.backgroundColor = '';
15                 }
16                 if (lv <= 1) {
17                     //弱
18                     tds[0].style.backgroundColor = 'red';
19                 }
20                 if (lv == 2) {
21                     //中
22                     tds[1].style.backgroundColor = 'green';
23                     tds[0].style.backgroundColor = 'green';
24                 }
25                 if (lv == 3) {
26                     //强
27                     tds[0].style.backgroundColor = 'blue';
28                     tds[1].style.backgroundColor = 'blue';
29                     tds[2].style.backgroundColor = 'blue';
30                 }
31             };
32             //1、准备一个判断密码级别的方法。
33             function checkPwd(pwd) {
34                 var lvl = 0;
35                 if (pwd.match(/[0-9]/)) {
36                     lvl++;
37                 }
38                 if (pwd.match(/[a-zA-Z]/)) {
39                     lvl++;
40                 }
41                 if (pwd.match(/[^0-9a-zA-Z]/)) {
42                     lvl++;
43                 }
44                 if (pwd.length<=6) {
45                     lvl--;
46                 }
47                 return lvl;
48             };
49         };
50 
51     </script>
52 </head>
53 <body>
54     <input id="txt" type="text" name="name" value=" " />
55     <input id="txt2" type="text" name="name" value=" " />
56     <!--<input type="button" name="name" value=" " />-->
57     <table id="tb" border="1"  style ="background-color:#B7B6B4;width:300px;height:30px;text-align:center;margin-top:20px">
58         <tr>
59             <td>弱</td>
60             <td>中</td>
61             <td>强</td>
62         </tr>
63     </table>
64 </body>
65 </html>

 

posted on 2016-01-11 11:07  努力的活着_在人间  阅读(331)  评论(0)    收藏  举报

导航