Passwortstärke mittels jQuery

Aug 9, 2008

Passwortstärke mittels jQuery

Categories: Featured, JavaScript and jQuery

Written By: admin

Ein Bild sagt bekanntlich mehr als tausend Worte, also wozu lange um den heissen Brei schreiben; mache dir anhand der kleinen Demo unterhalb dieses Textes einen ersten Eindruck des Scriptes.

Mindestens 6 Zeichen. Und sei kreativ!

Alle technisch forcierten User sind angehalten sich im Quelltext des Blogs an den entsprechenden Dateien zu bedienen. Das Script kann frei verwendet werden, Nennung des Autors ist nicht erforderlich. Alle anderen mögen weiterlesen.

Voraussetzungen
stellt der Passwortstärke-Indikator beinahe keine. Einzig das JavaScript Framework jQuery wird benötigt, da das Script auf dessen Basis erstellt ist.

Erforderliche Dateien

Neben dem jQuery Framework das eigentliche Passwortstärke-Script
Ein paar Zeilen CSS
Eine einzige Grafik (z.B der oben verwendete Graph)

Installation
HTML:

<input id="password_r" class="textInput" style="width: 282px;" name="myInput" type="password" />
<div id="result">
<div class="graph"><span id="gesamt" class="bar minifont" style="background: transparent none repeat scroll 0% 0%; width: 100%;">Mindestens 6 Zeichen. Und sei kreativ!</span></div>
</div>

JavaScript:

<script src="wp-content/demo/passwordStrength/passwordStrength.js" type="text/javascript"></script> <script type="text/javascript"><!--
jQuery(document).ready(function() {
$('#password_r').keyup(function(){ $('#result').html(passwordStrength($('#password_r').val())) });
});
// --></script>

CSS:

.minifont {
	font-size: 10px;
	color: #000;
	line-height: 1em;
}
 
/* PasswordStrength */
.graph { 
	position: relative; /* IE */
	width: 100%; 
	border: 1px solid #FFF; 
	width: 278px;
	padding: 2px;
}
 
.graph .bar { 
	display: block;
	position: relative;
	background-color: #fff;
	background: url(path/to/bar.jpg) repeat-y;
	opacity: 0.70;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	-khtml-opacity: 0.7;
	text-align: left; 
	height: 11px; 
}
 
.graph .bar span { 
	position: absolute;
	left: 1em; 
}

Nutzungsbedingungen
Es gibt keine. Mach mit dem Script was immer du willst; verwende, verändere und verbreite es, wie dir beliebt. Nennung des Autors ist nicht nötig.