网站注册时候，密码强弱性通常需要前端进行判断。整理判断密码强弱的两种方法，仅作为记录：
第一种：
<!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"/> <div class="pass-wrap"> <em>密码强度：</em> <div id="passStrength"></div> </div> </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 div = document.createElement('div'); var strong = document.createElement('strong'); this.oStrength = id.appendChild(div); 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]; };
这是一种简单的js判断，可以满足简单的业务功能。
第二种：利用正则判断密码的强弱
<!doctype html> <html> <head> <meta charset= "utf-" > <title>js密码强度</title> <style type= "text/css" > .pw_letter{ margin-top:px; font-size: px; } .pw_letter label{float: left; margin-right:px; cursor: default ; font-size: px; line-height: px;;} .pw_letter span{ float: left; display:inline-block; width:px; height:px; line-height:px; text-align:center; color: #FFF; background-color:#ccc; border-left: px solid #FFF;} .pw_letter span.pw_strength_color{ background-color:green;} </style> </head> <body> <input id= "password" type= "password" name= "password" placeholder= "密码" onKeyUp= "setPasswordStrength(this.value.trim())" > <div class= "pw_letter" ><label>安全程度</label> <span class= "strength" >弱</span> <span class= "strength" >中</span> <span class= "strength" >强</span> </div> <script type= "text/javascript" > /* *密码安全程度 *return ：全部为字母或者数字,或者密码长度小于 *return : 字母数字组成，或者字母特殊字符，或者数字和特殊字符 *return : 字母和数字和特殊字符 */ String.prototype.passwordStrength= function (){ if ( this .length> && this .length<=) return ; var n = ( this .search(/[a-zA-Z]/) != -) ? : , n = ( this .search(/[-]/) != -) ? : , n =( this .search(/[\~\`\!\@\ #\$\%\^\&\*\(\)\_\+\-\=\[\]|{\}\;\'\:\"\,\.\/\<\>\?]{,}/) != -) ? : ; return n+n+n; } String.prototype.trim = String.prototype.trim || function (){ return this .replace(/^\s+|\s+$/g," "); } function setPasswordStrength(pwd){ var strength_span = document.getElementsByClassName(" strength "); for(var i=; i<strength_span.length; i++){ strength_span.item(i).className=" strength "; } for(var i=; i<pwd.passwordStrength(); i++){ document.getElementsByClassName(" strength ").item(i).className=" strength pw_strength_color"; } } </script> </body>
