Überprüfung der js-Passwortstärke-js-Tutorial-php.cn

Überprüfung der js-Passwortstärke

高洛峰

Freigeben： 2017-01-16 09:23:26

Original

1196 Leute haben es durchsucht

Ich habe kürzlich an einem Passprojekt gearbeitet. Bei der Passworteingabe im Registrierungsmodul muss die Passwortstärke (niedrig, mittel, hoch) angezeigt werden. Heute werde ich die Ergebnisse mit Ihnen teilen. Der Code ist nicht so kompliziert wie die Online-Suche und kann allgemeine Anforderungen erfüllen.

HTML-Code lautet wie folgt:

<!DOCTYPE HTML>
<html>
<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>
 <em>密码强度：</em>
 <div id="passStrength"></div>
 </div>
</body>
</html>
<script type="text/javascript" src="js/passwordStrength.js"></script>
<script type="text/javascript">
new PasswordStrength(&#39;pass&#39;,&#39;passStrength&#39;);
</script>

Nach dem Login kopieren

JS-Code lautet wie folgt:

Code kopieren

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(&#39;div&#39;);
 var strong = document.createElement(&#39;strong&#39;);
 this.oStrength = id.appendChild(div);
 this.oStrengthTxt = id.parentNode.appendChild(strong);
};
PasswordStrength.prototype.checkStrength = function (val){
 var aLvTxt = [&#39;&#39;,&#39;低&#39;,&#39;中&#39;,&#39;高&#39;];
 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 = &#39;strengthLv&#39; + lv;
 this.oStrengthTxt.innerHTML = aLvTxt[lv];
};

Nach dem Login kopieren

Gebrauchsanweisung:

1, der erste Parameter des Objekts ist die ID des Passworteingabefelds und der zweite Parameter ist die ID der Passwortstärkeleiste.

2. Die Passwortstärkeregeln können in der checkStrength-Methode angepasst werden.

3. Die Passwortstärke wird entsprechend 3 CSS-Stilen (StrengthLv1, StrengthLv2, StrengthLv3) angezeigt.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt, und ich hoffe auch, dass jeder die chinesische PHP-Website abonniert.

Weitere Artikel zum Testen der JS-Passwortstärke finden Sie auf der chinesischen PHP-Website!