JS正则表达式验证密码强度

时间：2021-05-26

本文实例为大家分享了JS正则表达式验证密码强度的具体代码，供大家参考，具体内容如下

代码1：

<!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 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="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 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="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);}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章