javascript密码强度校验代码（两种方法）

2019-11-20 11:52:37

字体：大中小

来源：转载

供稿：网友

先看效果图：

javascript密码强度校验代码，具体实现思路不多说了，请看下面代码和demo。

第一种方法：

/* *密码安全程度  *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; }

demo

 <!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>

第二种方法：

javascript代码如下：

<script>function AuthPasswd(string) { if(string.length >=6) { if(/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string) && //W+/D+/.test(string)) {  noticeAssign(1); }else if(/[a-zA-Z]+/.test(string) || /[0-9]+/.test(string) || //W+/D+/.test(string)) {  if(/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string)) {  noticeAssign(-1);  }else if(//[a-zA-Z]+/.test(string) && //W+/D+/.test(string)) {  noticeAssign(-1);  }else if(/[0-9]+/.test(string) && //W+/D+/.test(string)) {  noticeAssign(-1);  }else{  noticeAssign(0);  } } }else{ noticeAssign(null);  }}function noticeAssign(num) { if(num == 1) { $('#weak').css({backgroundColor:'#009900'}); $('#middle').css({backgroundColor:'#009900'}); $('#strength').css({backgroundColor:'#009900'}); $('#strength').html('很强'); $('#middle').html(''); $('#weak').html(''); }else if(num == -1){ $('#weak').css({backgroundColor:'#ffcc33'}); $('#middle').css({backgroundColor:'#ffcc33'}); $('#strength').css({backgroundColor:''}); $('#weak').html(''); $('#middle').html('中'); $('#strength').html(''); }else if(num ==0) { $('#weak').css({backgroundColor:'#dd0000'}); $('#middle').css({backgroundColor:''}); $('#strength').css({backgroundColor:''}); $('#weak').html('弱'); $('#middle').html(''); $('#strength').html(''); }else{ $('#weak').html(' '); $('#middle').html(' '); $('#strength').html(' '); $('#weak').css({backgroundColor:''}); $('#middle').css({backgroundColor:''}); $('#strength').css({backgroundColor:''}); }}</script>

以上通过两种方法介绍了javascript密码强度校验代码，希望对大家有所帮助。

上一篇：javascript与Python快速排序实例对比

下一篇：javascript实现数组内值索引随机化及创建随机数组的方法