最近一直在做通行证项目，里面的注册模块中输入密码需要显示密码强度（低中高）。今天就把做的效果给大家分享下，代码没有网上搜索的那么复杂，能够满足一般的需求。
html 代码如下：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>密码强度</title> <style type="text/css"> #passstrength{height:6px;width:120px;border:1px solid #ccc;padding:2px;} .strengthlv1{background:red;height:6px;width:40px;} .strengthlv2{background:orange;height:6px;width:80px;} .strengthlv3{background:green;height:6px;width:120px;} </style> </head> <body> <input type="password" name="pass" id="pass" maxlength="16"/> <p class="pass-wrap"> <em>密码强度：</em> <p id="passstrength"></p> </p> </body> </html> <script type="text/javascript" src="js/passwordstrength.js"></script> <script type="text/javascript"> new passwordstrength('pass','passstrength'); </script>
js 代码如下：
function passwordstrength(passwordid,strengthid){ this.init(strengthid); var _this = this; document.getelementbyid(passwordid).onkeyup = function(){ _this.checkstrength(this.value); } }; passwordstrength.prototype.init = function(strengthid){ var id = document.getelementbyid(strengthid); var p = document.createelement('p'); var strong = document.createelement('strong'); this.ostrength = id.appendchild(p); this.ostrengthtxt = id.parentnode.appendchild(strong); }; passwordstrength.prototype.checkstrength = function (val){ var alvtxt = ['','低','中','高']; var lv = 0; if(val.match(/[a-z]/g)){lv++;} if(val.match(/[0-9]/g)){lv++;} if(val.match(/(.[^a-z0-9])/g)){lv++;} if(val.length < 6){lv=0;} if(lv > 3){lv=3;} this.ostrength.classname = 'strengthlv' + lv; this.ostrengthtxt.innerhtml = alvtxt[lv]; };
效果图：
使用说明：
1、对象的第一个参数是密码输入框的 id，第二个参数是密码强度长条的 id。
2、checkstrength 方法中可以自定义密码强度的规则。
3、密码强度显示低中高分别对应 3 个 css 样式（strengthlv1、strengthlv2、strengthlv3）。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
正则怎么匹配连续数字
正则实现最小匹配的开发经验
以上就是js的密码强度校验正则表达式（附代码）的详细内容。