Heim > Artikel > Web-Frontend > Anzeige von JavaScript-Code zur Bestimmung der Passwortstärke

Anzeige von JavaScript-Code zur Bestimmung der Passwortstärke

巴扎黑Original: 2017-09-14 12:00:121590Durchsuche

先看效果图：

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

第一种方法：

/*
 *密码安全程度 
 *return ：全部为字母或者数字,或者密码长度小于
 *return : 字母数字组成，或者字母特殊字符，或者数字和特殊字符
 *return : 字母和数字和特殊字符
 */
 String.prototype.passwordStrength=function(){
 if(this.length> && this.length&lt;=) return ;
 var n = (this.search(/[a-zA-Z]/) != -) ? : ,
 n = (this.search(/[-]/) != -) ? : ,
 n =(this.search(/[~`!@#$\%^&*()\_+-=[]|{};":",./&lt;>?]{,}/) != -) ? : ; 
 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())">
 <p class="pw_letter"><label>安全程度</label> <span class="strength">弱</span> <span class="strength">中</span> <span class="strength">强</span> </p>
 <script type="text/javascript">
 /*
 *密码安全程度 
 *return ：全部为字母或者数字,或者密码长度小于
 *return : 字母数字组成，或者字母特殊字符，或者数字和特殊字符
 *return : 字母和数字和特殊字符
 */
 String.prototype.passwordStrength=function(){
 if(this.length> && this.length&lt;=) return ;
 var n = (this.search(/[a-zA-Z]/) != -) ? : ,
 n = (this.search(/[-]/) != -) ? : ,
 n =(this.search(/[~`!@#$\%^&*()\_+-=[]|{};":",./&lt;>?]{,}/) != -) ? : ; 
 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代码如下：

&lt;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:""});
 }
}
&lt;/script>

Das obige ist der detaillierte Inhalt vonAnzeige von JavaScript-Code zur Bestimmung der Passwortstärke. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detailliertes Beispiel für die Verwendung von JavaScript zum Randomisieren des Werteindex in einem Array und zum Erstellen eines ZufallsarraysNächster Artikel：Detailliertes Beispiel für die Verwendung von JavaScript zum Randomisieren des Werteindex in einem Array und zum Erstellen eines Zufallsarrays

In Verbindung stehende Artikel

Mehr sehen