Ich habe einen jQuery Passwortstärke Analyser programmiert. Dieser ist natürlich sehr basic und der Code alles andere als optimal oder perfekt. Ich kriege selber Gänsehaut wenn ich ihn sehe. Man könnte so viel Code kürzern, modularisieren, verbessern, auslagern; so viel Design aufhübschen, interaktiver machen und so weiter. Aber die Zeit hab ich einfach jetzt nicht.
Ich empfehle also natürlich professionelle Plugins dieser Art. Den Code zeige ich rein aus informativen und lerntechnischen Gründen.
Wenn ich mal Zeit habe dann würde ich sicherlich probieren, meine Features in etwa wie hier auszubauen. Ein Großteil davon hat sich an 1, 2 Tagen aber nicht realisieren lassen.
Hier der Code und darunter die Erklärung einzelner Zeilen:
Update 05.06. – es gibt mittlerweile eine verbesserte Version 1.2 des Tools, bitte also den neuen Code aus diesem Post beachten!
$(document).ready(function()
{
$("input[type=checkbox]:first").change(function(){
if($("#passwort").is('.pw')) {
var passtemp = $("#passwort").val();
$("#passwrap").replaceWith('<div id="passwrap"><input type="text" id="passwort" class="text" size="30" maxlength="30" /></div>');
$("#passwort").val(passtemp);
} else {
var passtemp = $("#passwort").val();
$("#passwrap").replaceWith('<div id="passwrap"><input type="password" id="passwort" class="pw" size="30" maxlength="30" /></div>');
$("#passwort").val(passtemp);
}
});
$("#passwort").keyup(function() {
ratePW();
});
function runde(zahl) {
var rzahl = (Math.round(zahl * 10) / 10).toString();
rzahl += (rzahl.indexOf('.') == -1)? '.0' : '0';
return rzahl.substring(0, rzahl.indexOf('.') + 2);
}
function ratePW()
{
var strength = 0,
klein = 0,
cap = 0,
zahl = 0,
zeichen = 0;
var passlength = $("#passwort").val().length;
var input = $("#passwort").val();
$("#length").text("Passwortlänge: "+passlength+" Zeichen");
for(var i=0,l=passlength;i<l ;i++)
{
var x = input.charCodeAt(i);
if ( x >= 97 && x < = 122 ) {
klein += 1;
if ( klein > 4 ) {
strength += 0.2;
} else {
strength += 1;
}
} else if ( x >= 65 && x < = 90 ) {
cap += 1;
if ( cap > 4 ) {
strength += 0.6;
} else {
strength += 2;
}
} else if ( x >= 48 && x < = 57 ) {
zahl += 1;
if ( zahl > 4 ) {
strength += 1;
} else {
strength += 3;
}
} else if ( x >= 32 && x < = 47 || x >= 123 && x < = 126 || x >= 91 && x < = 96 || x >= 58 && x < = 64 ) {
zeichen += 1;
if ( zeichen > 4 ) {
strength += 2;
} else {
strength += 4;
}
} else {
alert("Fehler");
}
}
var rstrength = runde(strength);
$("#strength").text("Passwortstärke: "+rstrength);
if (rstrength == 0.0) {
$("#cover").css({'width':'208px','left':'1px'});
} else if (rstrength > 0.0 && rstrength < = 4.0) {
$("#cover").css({'width':'173px','left':'35px'});
} else if (rstrength > 3.0 && rstrength < = 8.0) {
$("#cover").css({'width':'139px','left':'69px'});
} else if (rstrength > 6.0 && rstrength < = 12.0) {
$("#cover").css({'width':'105px','left':'103px'});
} else if (rstrength > 9.0 && rstrength < = 16.0) {
$("#cover").css({'width':'71px','left':'137px'});
} else if (rstrength > 12.0 && rstrength < = 20.0) {
$("#cover").css({'width':'37px','left':'171px'});
} else if (rstrength > 15.0) {
$("#cover").css({'display':'none'});
}
};
}); //$(document).ready
Zeile 3:
Das Ändern einer Checkbox lässt sich mit
.change()
ganz leicht abfangen, hier wird die Checkbox durch eine ID identifiziert:
$("#hide").change(function() {
Man könnte auch
$("input[type=checkbox]:first").change nehmen; wie immer führen viele Wege nach Rom,
.change()
ist jedenfalls an dieser Stelle perfekt um Buttons aus dem Weg zu gehen.
Zeile 4:
Prüfen, ob ein Element eine Klasse besitzt.
is()
bietet sich da an.
if($("#passwort").is('.pw')Zeile 5:
.val()
fragt den Inhalt eines Elements ab, Inhalt auslesen. Mit
.val("bla") (Zeile 7) kann man den Inhalt setzen.
var passtemp = $("#passwort").val();
Zeile 6:
replaceWith()
ersetzt den Knoten, der angesprochen wird mitsamt Inhalt mit dem neuen Inhalt. Wird
replaceWith()
auf einen Tag mit ID angewendet so verschwindet auch der Tag mit der ID. Daher habe ich in den neuen Inhalt diesen Tag mit drin.
$("#passwrap").replaceWith('<div id="passwrap"><input type="text" id="passwort" class="text" size="30" maxlength="30" /></div>');
Ich glaub das könnte man mit
append()
,
html()
oder anderen inhaltsverändernden Funktionen eleganter lösen aber mein Beispiel ging in meinem Kopf am schnellsten umzusetzen, bei anderen Methoden hätte ich erstmal nochmal lesen müssen ^^
Zeile 15-17:
Beim Tastendruck im Textfeld mit der ID passwort wird die Funktion
ratePW()
ausgeführt.
$("#passwort").keyup(function() {
ratePW();
});
.keydown()
und
.keypress()
sind hier nicht geeignet. Testet mal aus, wie es sich dann verhält.
Zeile 19-23
Das Runden einer Zahl, in diesem Fall auf 1 Nachkommastelle. Full Credits an die Herren hier, denn von dort habe ich den Code geklaut. Hatte nicht die Nerven das selber zu schreiben. Danke 🙂
function runde(zahl) {
var rzahl = (Math.round(zahl * 10) / 10).toString();
rzahl += (rzahl.indexOf('.') == -1)? '.0' : '0';
return rzahl.substring(0, rzahl.indexOf('.') + 2);
}
Wenn vorhanden wird „.0“ auch angezeigt. Ich überlege noch ob das besser aussieht als ausblenden. Weil wenn mit Nachkommastellen dann eigentlich ja immer. Egal, keine Zeit 😀
Zeile 33
Wie oben beschrieben komme ich mit
.val()
an den Inhalt des Eingabefelds und mit
.length()
an die Anzahl der Zeichen, die Länge.
var passlength = $("#passwort").val().length;
Zeile 34,38-40:
Jedes mal, wenn eine Taste in das Eingabefeld eingetragen wird, bekommt
input
den Inhalt des Textfelds neu zugewiesen. Durch die Schleife wird jedes Zeichen dieser Zeichenkette einzeln durchlaufen. Die letzte Zeile weist x den dezimalen Charcode des Zeichen zu.
var input = $("#passwort").val();
for(var i=0,l=passlength;i<l ;i++)
{
var x = input.charCodeAt(i);
Ich hatte erst mit
.Number()
und
.parseInt()
probiert an den dezimalen Charcode zu kommen, kam immer NaN bei raus. Weiß einer wieso? Bin mir nicht so sicher, was da im Hintergrund abläuft. Bei Google findet man zu 90% diese 2 Funktionen, nur ganz selten die
.charCodeAt()
.
Zeile 41-71:
Ich spar es mir den Code hier nochmal zu posten. Die Zeilen überprüfen, welcher Typ Zeichen der zwischengespeicherte Char ist. Ich weiß, das if if else Chaos ist tödlich. Zudem sind viel zu viel Zeichen erlaubt. Die Fehlerbehandlung wie z.B. bei Umlauten ist noch nicht fertig. Es gehen auch Zeichen, die normalerweise bei Passwörtern nicht erlaubt sind. Viele Details die jemand mit Langerweile besser machen würde 😉
Ein verbautes Gimmick: Wird eine Zeichenart mehr als 4 Mal benutzt gibt es Abzüge in der Wertung. Damit soll die Variation der Zeichentypen gefördert werden. Schrecklich gelöst 😀
klein += 1;
if ( klein > 4 ) {
strength += 0.2;
} else {
strength += 1;
}
Zeile 74:
Wie oben beschrieben, rundet den Wert.
var rstrength = runde(strength);
Zeile 76-90:
Was in diesem Codeblock passiert ist mir wieder etwas peinlich. Ginge wahrscheinlich kürzer und besser, aber es funktioniert ^^
Mit
.css()
setze ich je nach Wertung die CSS Eigenschaften des #cover DIVs. Dies ist ein grauer Balken über dem eigentlichen, bunten Balken. Dieser graue Balken wird Stück für Stück kleiner, bis er bei über 20 Punkten ganz ausgeblendet wird. Die meisten vermuten, man habe nur einen farbigen Balken, der immer größer wird. Aber ich glaube das ist schwerer zu realisieren als 2 Balken. einer davon überdeckendend.
$("#cover").css({'width':'208px','left':'1px'});
$("#cover").css({'width':'173px','left':'35px'});
$("#cover").css({'width':'139px','left':'69px'});
//..
$("#cover").css({'display':'none'});
So, das wars. Eigentlich schon ein tolles Ding. Man kann natürlich auch eins der hunderten jQuery Plugins nutzen, die es mittlerweile gibt wie Sand am Meer. 😉
Und, wie stark ist euer Passwort?
