Heim > Artikel > Web-Frontend > Überprüfung der js-Passwortstärke

Überprüfung der js-Passwortstärke

高洛峰Original: 2017-01-16 09:23:261245Durchsuche

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>

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];
};

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!

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：Code zur Beurteilung der JavaScript-PasswortstärkeNächster Artikel：Code zur Beurteilung der JavaScript-Passwortstärke

In Verbindung stehende Artikel

Mehr sehen