js 密码强弱判断_js 密码强度-CSDN博客

本文链接：https://blog.csdn.net/qq_36192099/article/details/74930360

网站注册时候，密码强弱性通常需要前端进行判断。整理判断密码强弱的两种方法，仅作为记录：

第一种：

<!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则可以简单判断，密码类型及长度，以下仅供参考：

这是一种简单的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> 