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>