Come creare un Password Validator JavaScript

Indice dei contenuti

La sicurezza è uno degli aspetti più importanti da tenere in considerazione quando si sviluppa un sito; soprattutto quando si parla di proteggere i dati personali degli iscritti.

Riguardo questo argomento, purtroppo, la maggior parte delle persone è abituata ad utilizzare password di accesso poco complesse, molto semplici da ricordare e “scovare” per eventuali hacker.

Statisticamente, le password più utilizzate per l’iscrizione a siti web sono molto deboli, ad esempio “abcefgh” o “12345678” e via così. Chiunque ne faccia uso, ignora completamente il rischio a cui si sta sottoponendo.

Per ovviare a questo problema, gli sviluppatori di siti fanno uso di tool pensati appositamente per impedire che gli iscritti facciano uso di password semplici. Questi strumenti, chiamati “Password Validator“, sono progettati affinché un utente sia costretto ad usare parole composte da lettera maiuscole e minuscole, numeri e simboli, magari con lunghezza minima della password di 8-10 caratteri.

Avrai sicuramente già avuto modo di testare uno strumento simile, e se sei uno sviluppatore di siti, adesso ti spiegherò come programmarne uno per il tuo sito web.

Per generare password sicure, usa il nostro strumento “Password generator“

Password Validator in JavaScript

Un password validator, o strumento per la validazione di password, è un utile strumento presente nelle pagine di iscrizione dei siti web, che permette di avere una panoramica generale della sicurezza delle password scelta, e magari impedire che ne venga utilizzata una molto debole in fase di iscrizione.

In caso di esito negativo, all’utente non sarà possibile proseguire, perciò verrà “obbligato” dal sistema a sceglierne una nuova o ad aggiungere ulteriori caratteri, il tutto in maniera automatica.

Per programmarne uno, dovremo fare in modo che JavaScript testi il livello di sicurezza della parola chiave ad ogni lettera digitata, e in base ad un algoritmo prestabilito, assegni ed incrementi un valore numerico fino al massimo consentito; più alto sarà il numero, più sarà sicura la password.

Nel nostro codice questo valore numerico sarà convertito in una barra grafica che aumenterà la sua larghezza progressivamente fino al valore massimo.

Demo

Qui la dimostrazione dello strumento per la validazione di password, ospitato da Codewith.it.

Il progetto originale del “Password Validator” è realizzato su Codewith.it. Potrebbero essere apportate modifiche a tale progetto in futuro. Ti consiglio di consultare anche la pagina originale per ulteriori aggiornamenti.

Il codice

Qui di seguito il codice del “password validator”, suddiviso in 3 fasi, HTML, CSS e JavaScript. Abbiamo aggiunto anche una parte CSS per migliorare lo stile grafico degli elementi, tuttavia potrai modificarlo come preferisci.

HTML

<h1>
  Password Validator
</h1>

<!-- Area di input -->
<input type="text" id="txt" onkeyup="validator()" placeholder="Insert password" pattern="[\S\s]" autocomplete="off" value="">

<!-- Barra di progresso, cambia colore in base al livello di sicurezza -->
<div id="ProgressBar">
  <div id="bar">
  </div>

<!-- Area di testo aggiuntiva -->
  <p id="alert">
  </p>
</div>

Come puoi vedere il primo elemento (area di input) è adibito all’inserimento della password da parte degli utenti. A seguire troviamo la barra di progresso, che cambierà colore in base al livello di sicurezza generale della password immessa (rosso, giallo, verde). Subito in basso invece, una piccola area di testo aggiuntiva, nel quale comparirà un valore testuale in base alla sicurezza della password (debole, media, forte).

Da notare l’evento “onkeyup” nell’area di input della password, che farà eseguire la funzione JavaScript “validator()“, che vedremo di seguito.

CSS

Opzionale, ma consigliato. Le regole CSS inserite servono a migliorare l’estetica degli elementi, come la barra di progresso e l’area di input. Ti consiglio di aggiungerle al tuo progetto e modificarle manualmente in caso di necessità.

#ProgressBar {
  width: 100%%;
  background-color: #ddd;
  max-width:300px;
}
#bar {
  width: 1%;
  height: 10px;
  background-color: #4CAF50;
  max-width:300px;
}
#txt {
  width:300px;
  padding:5px;
  text-align:center;
}
#alert {
  font-weight:bold;
  text-align:center;
}

JavaScript

Qui entriamo nel cuore dello strumento, lo script che fa funzionare il tutto. Nel seguente codice potrai notare che. in caso di immissione del testo nell’area di input (tramite evento onkeyup="" nel codice HTML – vedi sopra), venga eseguita la funzione “validator()” che eseguirà differenti test ed assegnerà un valore numerico progressivo. Questo determinerà la sicurezza della password.

function validator() {
  var x = 0;
  var password = document.getElementById('txt').value;
  var bar = document.getElementById("bar");
  var al = document.getElementById("alert");

  //controllo numeri
  var check=/[0-9]/;
  if(check.test(password)){
    x = x + 20;
  }
  //controllo minuscole
  var check2=/[a-z]/;
  if(check2.test(password)){
    x = x + 20;
  }
  //controllo maiuscole
  var check3=/[A-Z]/;
  if(check3.test(password)){
    x = x + 20;
  }
  //controllo simboli
  var check4=/[$-/:-?{-~!"^_`\[\]]/;
  if(check4.test(password)){
    x = x + 20;
  }
  // controllo lunghezza (minore o uguale a 10 caratteri)
  if(password.length >=10){
    x = x + 20;
  }

  // risultato
  bar.style.width = x + "%";
  // voto massimo 100
  if (x == 100) {
    bar.style.backgroundColor = "green";
    al.innerHTML = "Very strong";
  }
  if (x >60) {
    bar.style.backgroundColor = "green";
    al.innerHTML = "Strong";
  }
  if (x <=40) {
    bar.style.backgroundColor = "yellow";
    al.innerHTML = "Good";
  }
  //voto minimo 20
  if (x <=20) {
    bar.style.backgroundColor = "red";
    al.innerHTML = "Weak";
  }

  if(password.length == 0){
    x == 0;
    al.innerHTML = "";
  }

  //controllo spazi bianchi
  var check5=/\s\S/;
  if(check5.test(password)){
    al.innerHTML = "Password must not contain white spaces";
    bar.style.backgroundColor = "red";
  }
}

La funzione controllerà in automatico la presenza di numeri, lettere maiuscole, lettere minuscole, simboli, e lunghezza minima; inoltre è programmato un controllo aggiuntivo per la presenza degli spazi bianchi nel testo, invalidando la password.

Incolla tutti i codici nella tua pagina come preferisci.

Codice completo

Per semplificare l’integrazione dello strumento, qui il codice completo:

<style>
#ProgressBar {
  width: 100%%;
  background-color: #ddd;
  max-width:300px;
}
#bar {
  width: 1%;
  height: 10px;
  background-color: #4CAF50;
  max-width:300px;
}
#txt {
  width:300px;
  padding:5px;
  text-align:center;
}
#alert {
  font-weight:bold;
  text-align:center;
}
</style>

<h1>
  Password Validator
</h1>
<input type="text" id="txt" onkeyup="validator()" placeholder="Insert password" pattern="[\S\s]" autocomplete="off" value="">
<div id="ProgressBar">
  <div id="bar">
  </div>
  <p id="alert">
  </p>
</div> 

<script>
function validator() {
  var x = 0;
  var password = document.getElementById('txt').value;
  var bar = document.getElementById("bar");
  var al = document.getElementById("alert");

  //controllo numeri
  var check=/[0-9]/;
  if(check.test(password)){
    x = x + 20;
  }
  //controllo minuscole
  var check2=/[a-z]/;
  if(check2.test(password)){
    x = x + 20;
  }
  //controllo maiuscole
  var check3=/[A-Z]/;
  if(check3.test(password)){
    x = x + 20;
  }
  //controllo simboli
  var check4=/[$-/:-?{-~!"^_`\[\]]/;
  if(check4.test(password)){
    x = x + 20;
  }
  // controllo lunghezza (minore o uguale a 10 caratteri)
  if(password.length >=10){
    x = x + 20;
  }

  // risultato
  bar.style.width = x + "%";
  // voto massimo 100
  if (x == 100) {
    bar.style.backgroundColor = "green";
    al.innerHTML = "Very strong";
  }
  if (x >60) {
    bar.style.backgroundColor = "green";
    al.innerHTML = "Strong";
  }
  if (x <=40) {
    bar.style.backgroundColor = "yellow";
    al.innerHTML = "Good";
  }
  //voto minimo 20
  if (x <=20) {
    bar.style.backgroundColor = "red";
    al.innerHTML = "Weak";
  }

  if(password.length == 0){
    x == 0;
    al.innerHTML = "";
  }

  //controllo spazi bianchi
  var check5=/\s\S/;
  if(check5.test(password)){
    al.innerHTML = "Password must not contain white spaces";
    bar.style.backgroundColor = "red";
  }
}
</script>

Potrebbe interessarti: Come creare una console di debug con JavaScript

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!

Articoli recenti: