La robustezza di una password non dipende solo dalla sua lunghezza, ma anche dalle combinazioni di caratteri presenti al suo interno. Ad esempio una password puramente alfabetica è più debole di una password alfanumerica, così come una password con caratteri speciali e alfanumerici è più forte di una semplice password alfanumerica. Possiamo usare le espressioni regolari JavaScript e jQuery per creare un misuratore di robustezza di una password. Vediamo come.
Useremo questa struttura HTML come base:
<form action="#" method="post" id="form">
<div>
<label for="pass">Password:</label>
<input type="password" name="pass" id="pass" />
<div id="passstrength"></div>
</div>
</form>
E il seguente codice jQuery:
$(function() {
$('#pass').keyup(function(e) {
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
if (false == enoughRegex.test($(this).val())) {
$('#passstrength').html('Troppi pochi caratteri');
} else if (strongRegex.test($(this).val())) {
$('#passstrength')[0].className = 'ok';
$('#passstrength').html('Forte');
} else if (mediumRegex.test($(this).val())) {
$('#passstrength')[0].className = 'alert';
$('#passstrength').html('Media');
} else {
$('#passstrength')[0].className = 'error';
$('#passstrength').html('Debole');
}
return true;
});
});
Il codice usa tre espressioni regolari diverse che andranno usate ad ogni pressione di un tasto sul campo del form. Ogni volta l'espressione regolare usata verifica che la password inserita sia conforme ad un determinato pattern che ne testa la robustezza.
Potete visionare l'esempio finale in questa pagina.