# 驗證密碼長度 <br> ```css #dv { width: 300px; height: 200px; position: absolute; left: 300px; top: 100px; } .strengthLv0 { height: 6px; width: 120px; border: 1px solid #ccc; padding: 2px; } .strengthLv1 { background: red; height: 6px; width: 40px; border: 1px solid #ccc; padding: 2px; } .strengthLv2 { background: green; height: 6px; width: 80px; border: 1px solid #ccc; padding: 2px; } .strengthLv3 { background: blue; height: 6px; width: 120px; border: 1px solid #ccc; padding: 2px; } </style> ``` ```html <div id="dv"> <label for="pwd">密碼</label> <input type="text" id="pwd" maxlength="16"> <!--課外話題--> <div> <em>密碼強度：</em> <em id="strength"></em> <div id="strengthLevel" class="strengthLv0"></div> </div> </div> <script src="public.js"></script> ``` ```javascript /* 密碼：數字，字母，特殊符號 只有數字，或只有字母，或只有特殊符號---屬于一級，顯示紅色 兩兩組合---屬于二級，顯示綠色 三者都有---屬于三級，顯示藍色 */ // 獲取元素，綁定鍵盤抬起事件 my$("pwd").onkeyup = function () { // 鍵盤抬起的時候獲取文本框中的內容，驗證級別并添加相應的類顯示顏色 // 密碼長度小于6 不做任意操作 if (this.value.length >= 6) { var lv1 = getLve(this.value); if (lv1 == 1) { my$("strengthLevel").className = "strengthLv1"; } else if (lv1 == 2) { my$("strengthLevel").className = "strengthLv2"; } else if (lv1 == 3) { my$("strengthLevel").className = "strengthLv3"; } } else { my$("strengthLevel").className = "strengthLv0"; } } // 做判斷 ，判斷級別 function getLve(pwd) { var lv1 = 0; // 只有數字 if (/\d/.test(pwd)) { lv1++; } // 數字跟字母 if (/[a-zA-Z]/.test(pwd)) { lv1++; } // 三者都有 //[^0-9a-zA-Z_] 取反，表示特殊字符 if (/[^0-9a-zA-Z_]/.test(pwd)) { lv1++; } return lv1; } ``` ????