# 验证密码长度 <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; } ```