密码强度

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>密码强度</title>
  6 </head>
  7 <style type="text/css">
  8     body {
  9         background: #ccc;
 10     }
 11 
 12     label {
 13          40px;
 14         display: inline-block;
 15     }
 16 
 17     span {     
 18         color: red;
 19     }
 20 
 21     .container {
 22         margin: 100px auto;
 23          400px;
 24         padding: 50px;
 25         line-height: 40px;
 26         border: 1px solid #999;
 27         background: #efefef;
 28     }
 29 
 30     span {
 31         margin-left: 30px;
 32         font-size: 12px;
 33     }
 34 
 35     .wrong {
 36         color: red
 37     }
 38 
 39     .right {
 40         color: green;
 41     }
 42 
 43     .strengthLv0 {
 44         height: 6px;
 45          120px;
 46         border: 1px solid #ccc;
 47         padding: 2px;
 48     }
 49 
 50     .strengthLv1 {
 51         background: red;
 52         height: 6px;
 53          40px;
 54         border: 1px solid #ccc;
 55         padding: 2px;
 56     }
 57 
 58     .strengthLv2 {
 59         background: orange;
 60         height: 6px;
 61          80px;
 62         border: 1px solid #ccc;
 63         padding: 2px;
 64     }
 65 
 66     .strengthLv3 {
 67         background: green;
 68         height: 6px;
 69          120px;
 70         border: 1px solid #ccc;
 71         padding: 2px;
 72     }
 73 </style>
 74 <body>
 75 <div class="container">
 76     <label>密码</label>
 77     <input type="text" id="inp1" maxlength="16">
 78     <!--<input type="password" id="inp1" maxlength="16"/>-->
 79     <div class="pass-wrap">
 80         <em>密码强度：</em>
 81 
 82         <em id="strength"></em>
 83 
 84         <div id="strengthLevel" class="strengthLv0"></div>
 85     </div>
 86 </div>
 87 <script>
 88     var inp1 = document.getElementById("inp1");
 89     var strength = document.getElementById("strength");
 90     var strengthLevel = document.getElementById("strengthLevel");
 91     var array = ['', '低', '中', '高'];
 92     inp1.onkeyup = function () {
 93         var level = 0;
 94         if (/[a-z]/.test(this.value)) {
 95             level++;
 96         }
 97         if (/[0-9]/.test(this.value)) {
 98             level++;
 99         }
100         if (/[^a-z0-9]/.test(this.value)) {
101             level++;
102         }
103         if (this.value.length < 6) {
104             level = 0;
105         }
106         if (level > 3) {
107             level = 3;
108         }
109         strength.innerHTML = array[level];
110         strengthLevel.className = 'strengthLv' + level;
111     };
112 </script>
113 </body>
114 </html>