Heim >Web-Frontend >js-Tutorial >Überprüfung der js-Passwortstärke
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('pass','passStrength');
</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('div');
var strong = document.createElement('strong');
this.oStrength = id.appendChild(div);
this.oStrengthTxt = id.parentNode.appendChild(strong);
};
PasswordStrength.prototype.checkStrength = function (val){
var aLvTxt = ['','低','中','高'];
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 = 'strengthLv' + 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!