Ich habe kürzlich an einem Passprojekt gearbeitet. Das Eingeben eines Kennworts in das Registrierungsmodul im Inneren erfordert die Kennwortstärke (niedrig, mittel und hoch). Heute werde ich die Ergebnisse der Arbeit mit Ihnen teilen. Der Code ist nicht so kompliziert wie online zu suchen und kann den allgemeinen Anforderungen erfüllen.
Der HTML -Code lautet wie folgt:
Die Codekopie lautet wie folgt:
<! DocType html>
<html lang = "en">
<kopf>
<meta charset = "utf-8"/>
<title> Passwortstärke </title>
<style type = "text/css">
#PassStrength {Höhe: 6px; Breite: 120px; Grenze: 1px fest #CCC; Padding: 2px;}
.Strengthlv1 {Hintergrund: rot; Höhe: 6px; Breite: 40px;}
.Strengthlv2 {Hintergrund: Orange; Höhe: 6px; Breite: 80px;}
.Strengthlv3 {Hintergrund: Grün; Höhe: 6px; Breite: 120px;}
</style>
</head>
<body>
<Eingabe type = "Passwort" name = "Pass" id = "Pass" maxLength = "16"/>
<div>
<em> Passwortstärke: </em>
<div id = "passStrength"> </div>
</div>
</body>
</html>
<script type = "text/javaScript" src = "js/passwaltStrength.js"> </script>
<script type = "text/javaScript">
neuer PasswortStrength ('Pass', 'PassStrength');
</script>
Der JS -Code lautet wie folgt:
Die Codekopie lautet wie folgt:
Funktion passwartStrength (passwordId, streng) {
this.init (streng);
var _this = this;
document.getElementById (passwordId) .onkeyUp = function () {
_this.Checkstrength (this.value);
}
};
PassageStrength.Prototype.init = Funktion (streng) {
var id = document.getElementById (streng);
var div = document.createelement ('div');
var strong = document.createelement ('strong');
this.ostrength = id.Appendchild (div);
this.oStrengthtxt = id.parentnode.AppendChild (stark);
};
PassageStrength.Prototype.Checkstrength = Funktion (val) {
var alvtxt = ['', 'niedrig', 'medium', 'hoch'];
var lv = 0;
if (val.match (/[az]/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 = 'strengv' + lv;
this.Strengthtxt.innerhtml = alvtxt [lv];
};
Reproduktionsbild:
Anweisungen zur Verwendung:
1. Der erste Parameter des Objekts ist die ID des Kennworteingangsfelds, und der zweite Parameter ist die ID der Kennwortstärkeleiste.
2. Die Überprüfungsmethode kann die Kennwortstärkeregeln anpassen.
3. Die Kennwortstärke zeigt niedrig, mittel und hoch an, entsprechen 3 CSS -Stilen (StrengthLV1, StrengthLV2, StrengthLV3).