码迷,mamicode.com
首页 > 编程语言 > 详细

18JavaScript 网页中的密码级别

时间:2016-01-11 12:13:15      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:

 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>

 

18JavaScript 网页中的密码级别

标签:

原文地址:http://www.cnblogs.com/clcloveHuahua/p/5120518.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!