<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/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: orange; height: 6px; width: 80px; border: 1px solid #ccc; padding: 2px; } .strengthLv3 { background: green; height: 6px; width: 120px; border: 1px solid #ccc; padding: 2px; } </style> <body> <div> <label for="pwd">密码</label> <input type="text" maxlength="16"><!--课外话题--> <div> <em>密码强度：</em> <em></em> <div></div> </div> </div> <script src="https://www.jb51.net/common.js"></script> <script> /* * * 密码: 数字,字母,特殊符号 * * 密码: 只有数字- 或者是只有字母,或者是只有特殊符号---1级---弱 * 两两组合: 数字和字母, 数字和特殊符号, 字母和特殊符号 -----2级----中 * 三者都有: 数字和字母和特殊符号------3级-----强 * * */ //获取文本框注册键盘抬起事件 my$("pwd").onkeyup=function () { //每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色 //如果密码的长度是小于6的,没有必要判断 if(this.value.length>=6){ var lvl=getLvl(this.value); if(lvl==1){ //弱 my$("strengthLevel").className="strengthLv1"; }else if(lvl==2){ my$("strengthLevel").className="strengthLv2"; }else if(lvl==3){ my$("strengthLevel").className="strengthLv3"; }else{ my$("strengthLevel").className="strengthLv0"; } }else{ my$("strengthLevel").className="strengthLv0"; } }; //给我密码,我返回对应的级别 function getLvl(pwd) { var lvl=0;//默认是0级 //密码中是否有数字,或者是字母,或者是特殊符号 if(/[0-9]/.test(pwd)){ lvl++; } //判断密码中有没有字母 if(/[a-zA-Z]/.test(pwd)){ lvl++; } //判断密码中有没有特殊符号 if(/[^0-9a-zA-Z_]/.test(pwd)){ lvl++; } return lvl;//1 3 } </script> </body> </html>
优化代码2：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/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: orange; height: 6px; width: 80px; border: 1px solid #ccc; padding: 2px; } .strengthLv3 { background: green; height: 6px; width: 120px; border: 1px solid #ccc; padding: 2px; } </style> <body> <div> <label for="pwd">密码</label> <input type="text" maxlength="16"><!--课外话题--> <div> <em>密码强度：</em> <em></em> <div></div> </div> </div> <script src="https://www.jb51.net/common.js"></script> <script> //获取文本框注册键盘抬起事件 my$("pwd").onkeyup=function () { //每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色 //如果密码的长度是小于6的,没有必要判断 // if(this.value.length>=6){ // var lvl= getLvl(this.value); // my$("strengthLevel").className="strengthLv"+lvl; // }else{ // my$("strengthLevel").className="strengthLv0"; // } my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value) :0); }; //给我密码,我返回对应的级别 function getLvl(pwd) { var lvl=0;//默认是0级 //密码中是否有数字,或者是字母,或者是特殊符号 if(/[0-9]/.test(pwd)){ lvl++; } //判断密码中有没有字母 if(/[a-zA-Z]/.test(pwd)){ lvl++; } //判断密码中有没有特殊符号 if(/[^0-9a-zA-Z_]/.test(pwd)){ lvl++; } return lvl;//最小的值是1,最大值是3 } </script> </body> </html>
common.js
/** * 获取指定标签对象 * @param id 标签的id属性值 * @returns {Element}根据id属性值返回指定标签对象 */ function my$(id) { return document.getElementById(id); }