jQuery: misuratore della lunghezza di una password

  • jQuery
  • Gabriele Romanato

Per creare un misuratore che verifichi la lunghezza di una password con jQuery dobbiamo semplicemente aggiungere degli elementi ogni volta che l'utente preme un tasto. Questi elementi sono vuoti ed hanno uno sfondo diverso. Vanno aggiunti ad un elemento vuoto che fungerà da indicatore di lunghezza. Dobbiamo inoltre usare l'accortezza di intercettare la pressione del tasto Backspace in modo da poter resettare il nostro indicatore. Vediamo insieme i dettagli.

La struttura HTML che creeremo con jQuery è la seguente:


<div id="password-checker">
	Livello di sicurezza
	<div id="password-level"></div>
</div>

Nel CSS, dobbiamo fare in modo che la larghezza totale degli elementi aggiunti non provochi una fuoriuscita di contenuto dall'indicatore:


#password-checker {
	clear: both;
	height: 100%;
	padding: 4px 0 4px 7.2em;
}

#password-level {
	width: 150px;
	height: 12px;
	border: 1px solid #666;
	margin-top: 4px;
	overflow: hidden;
	position: relative;
}

span.level {
  width: 15px;
  height: 12px;
  float: left;
}

span.mark {
   color: #393;
}


div.low {
	color: red;
	padding: 4px 0;
}

div.medium {
	color: orange;
	padding: 4px 0 4px 52px;
}

div.high {
	color: green;
	padding: 4px 0 4px 91px;
}

Come abbiamo detto in precedenza, dobbiamo aggiungere o rimuovere degli elementi vuoti ad ogni pressione di un tasto. Inoltre dobbiamo conteggiare il numero di caratteri inseriti per poter visualizzare il livello appropriato per quel numero di caratteri:


$(document).ready(function() {

 var checker = $('<div id="password-checker"></div>').html('Livello di sicurezza' + '<div id="password-level"></div>');
       
 checker.insertAfter('input[type=password]');
 
 
 $('#login-form').find('input[type=password]').keyup(function(event) {
	
	       $('<span class="level"></span>').appendTo('#password-level');
	       if(event.keyCode == 8 || event.keyCode == 46) {
	       
	           $('span.level').remove();
	           $('input[type=password]').attr('value', '');
	           $('#password-checker div[class]').remove();
	          
	       }
	       
	       
	       var low = $('<div class="low"></div>').text('Basso');
	       var medium = $('<div class="medium"></div>').text('Medio');
	       var high = $('<div class="high"></div>').text('Alto');
	       
	       
	       if($('span.level').size() <= 3) {
	       
	           $('span.level').css('background', 'red');
		   
		   if($('span.level').size() == 1) {
		     low.appendTo('#password-checker');
		   }
		   
	        }
		
		
		if($('span.level').size() > 3 && $('span.level').size() <= 6) {
		
		
		    $('span.level').css('background', 'orange');
		    $('#password-checker div.low').remove();
		    
		    if($('span.level').size() == 4) {
		        medium.appendTo('#password-checker');
		    }
		}
		
		if($('span.level').size() > 6 && $('span.level').size() <= 10) {
		
		
		    $('span.level').css('background', 'green');
		    $('#password-checker div.medium').remove();
		    
		    if($('span.level').size() == 7) {
		        high.appendTo('#password-checker');
		    }
		    
		    
		    
		    
		}
		
				
		
	
	});
    




});

L'implementazione presenta un problema: quando l'utente preme il tasto Backspace viene resettato l'intero indicatore. In realtà si potrebbe perfezionare l'implementazione selezionando l'ultimo elemento con classe CSS level e per ogni pressione del tasto Backspace si potrebbe rimuovere l'elemento corrente.

Si può ottenere questo effetto impostando un contatore usando come valore di partenza la proprietà length degli elementi con classe level. A quel punto ad ogni pressione del tasto Backspace si può decrementare il contatore e usarlo per selezionare l'elemento da rimuovere tramite il metodo eq().

Potete visionare l'esempio finale in questa pagina.

Torna su