V tomto tutoriálu vytvoříme krásný indikátor síly hesla. Pomocí nového pluginu Complexify jQuery určí složitost hesla a podle toho posune metr. Pouze po zadání dostatečně složitého hesla bude uživatel moci pokračovat v registraci.
K dispozici je také soubor PSD, takže si formulář můžete přizpůsobit podle svých představ.
HTML
Začneme standardním dokumentem HTML5, který bude obsahovat náš registrační formulář. Formulář bude sloužit pouze jako příklad měřiče hesel – pokud potřebujete podporu pro skutečné registrace, budete muset napsat požadovaný kód na straně serveru.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>How to Make a Beautiful Password Strength Indicator</title>
<!-- The stylesheet -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="main">
<h1>Sign up, it's FREE!</h1>
<form class="" method="post" action="">
<div class="row email">
<input type="text" id="email" name="email" placeholder="Email" />
</div>
<div class="row pass">
<input type="password" id="password1" name="password1" placeholder="Password" />
</div>
<div class="row pass">
<input type="password" id="password2" name="password2" placeholder="Password (repeat)" disabled="true" />
</div>
<!-- The rotating arrow -->
<div class="arrowCap"></div>
<div class="arrow"></div>
<p class="meterText">Password Meter</p>
<input type="submit" value="Register" />
</form>
</div>
<!-- JavaScript includes - jQuery, the complexify plugin and our own script.js -->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="assets/js/jquery.complexify.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html> Pro lepší výkon uvádíme nejnovější verzi jQuery, plugin Complexify a náš script.js přímo před závěrečnou značku body.
jQuery
Níže uvedený kód jQuery je poměrně jednoduchý. Na prvky formuláře vážeme řadu událostí a ověřujeme je. Pokud došlo k chybě, přidáme „chybu třídy do řádku . div, který obsahuje vstup. Tím se zobrazí červený křížek. "úspěch " třída na druhé straně zobrazí zelené zaškrtnutí. Po odeslání formuláře zkontrolujeme, zda jsou všechny řádky označeny jako úspěšné pro povolení odeslání.
assets/js/script.js
$(function(){
// Form items
var pass1 = $('#password1'),
pass2 = $('#password2'),
email = $('#email'),
form = $('#main form'),
arrow = $('#main .arrow');
// Empty the fields on load
$('#main .row input').val('');
// Handle form submissions
form.on('submit',function(e){
// Is everything entered correctly?
if($('#main .row.success').length == $('#main .row').length){
// Yes!
alert("Thank you for trying out this demo!");
e.preventDefault(); // Remove this to allow actual submission
}
else{
// No. Prevent form submission
e.preventDefault();
}
});
// Validate the email field
email.on('blur',function(){
// Very simple email validation
if (!/^\[email protected]\S+\.\S+$/.test(email.val())){
email.parent().addClass('error').removeClass('success');
}
else{
email.parent().removeClass('error').addClass('success');
}
});
/* The Complexify code will go here */
// Validate the second password field
pass2.on('keydown input',function(){
// Make sure it equals the first
if(pass2.val() == pass1.val()){
pass2.parent()
.removeClass('error')
.addClass('success');
}
else{
pass2.parent()
.removeClass('success')
.addClass('error');
}
});
}); Když je to z cesty, můžeme pokračovat pomocí pluginu Complexify, který ověří heslo. Plugin přebírá funkci zpětného volání se dvěma argumenty – procentní hodnotou od 0 do 100 v závislosti na složitosti hesla a platným příznak, který bere v úvahu požadavek na minimální délku, definovaný pomocí minimumChars vlastnost.
Vyladěním strengthScaleFactor můžete povolit použití jednodušších hesel. Výchozí stupnice je 1, která vyžaduje kombinaci velkých a malých písmen, číslic a speciálních znaků, ale zdálo se mi příliš přísné, takže jsem ji snížil na 0,7. Pokud potřebujete ještě jednodušší hesla, můžete jej snížit.
pass1.complexify({minimumChars:6, strengthScaleFactor:0.7}, function(valid, complexity){
if(valid){
pass2.removeAttr('disabled');
pass1.parent()
.removeClass('error')
.addClass('success');
}
else{
pass2.attr('disabled','true');
pass1.parent()
.removeClass('success')
.addClass('error');
}
var calculated = (complexity/100)*268 - 134;
var prop = 'rotate('+(calculated)+'deg)';
// Rotate the arrow. Additional rules for different browser engines.
arrow.css({
'-moz-transform':prop,
'-webkit-transform':prop,
'-o-transform':prop,
'-ms-transform':prop,
'transform':prop
});
}); Pokud byla předána platná hodnota, povolíme druhé pole pro heslo (ve výchozím nastavení je zakázáno). K otočení šipky použijeme také transformace CSS3. Transformace bude animovaná díky vlastnosti transition, kterou můžete vidět v sekci CSS. Šipka se pohybuje od -134 do 134 stupňů (výchozí 0 stupňů odpovídá šipce směřující svisle nahoru), takže kód to kompenzuje.
CSS
Zde uvedu jen ty zajímavější části šablony stylů. Následující kód stylizuje šipku a definuje přechod.
assets/css/styles.css
#main form .arrow{
background: url("../img/arrow.png") no-repeat -10px 0;
height: 120px;
left: 214px;
position: absolute;
top: 392px;
width: 11px;
/* Defining a smooth CSS3 animation for turning the arrow */
-moz-transition:0.3s;
-webkit-transition:0.3s;
-o-transition:0.3s;
-ms-transition:0.3s;
transition:0.3s;
/* Putting the arrow in its initial position */
-moz-transform: rotate(-134deg);
-webkit-transform: rotate(-134deg);
-o-transform: rotate(-134deg);
-ms-transform: rotate(-134deg);
transform: rotate(-134deg);
}
/* The small piece that goes over the arrow */
#main form .arrowCap{
background: url("../img/arrow.png") no-repeat -43px 0;
height: 20px;
left: 208px;
position: absolute;
top: 443px;
width: 20px;
z-index: 10;
} Zbytek kódu najdete v assets/css/styles.css . Nejlepší způsob, jak se naučit, jak to všechno funguje, je prohlédnout si funkční demo s nástroji Firebug nebo Chrome pro vývojáře a pohrát si se styly.
Máme hotovo!
Na tomto příkladu můžete stavět a použít jej k prezentaci poutavé možnosti ověření pro vaše zákazníky. A ještě snazší je přizpůsobit pomocí přiloženého PSD.