Password validator by @Codewith.it - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<h6>Titolo di intestazione di sesto livello
listCollega un elemento input con una lista di opzioni datalist
animationDefinisce i parametri dell'animazione di un elemento o selettore
requiredRende obbligatorio un campo di input
<td>Definisce una cella di una tabella HTML.
idIdentifica univocamente un elemento HTML

Users

Log in to search for users

Explore

Find inspiration

Questa è una pagina dimostrativa

Esercizi 05/03/2024 es2

esercitazione n. 1

Html con 3 img e descrize

Old html delajo - Download e Prezzi

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<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>

#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;
}

function validator() {
  var x = 0;
  var password = document.getElementById('txt').value;
  var bar = document.getElementById("bar");
  var al = document.getElementById("alert");
  //numbers
  var check=/[0-9]/;
  if(check.test(password)){
    x = x + 20;
  }
  //lowercase
  var check2=/[a-z]/;
  if(check2.test(password)){
    x = x + 20;
  }
  //uppercase
  var check3=/[A-Z]/;
  if(check3.test(password)){
    x = x + 20;
  }
  //symbols
  var check4=/[$-/:-?{-~!"^_`\[\]]/;
  if(check4.test(password)){
    x = x + 20;
  }
  // result
  if(password.length >=10){
    x = x + 20;
  }
  bar.style.width = x + "%";
  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";
  }
  if (x <=20) {
    bar.style.backgroundColor = "red";
    al.innerHTML = "Weak";
  }
  if(password.length == 0){
    x == 0;
    al.innerHTML = "";
  }
  //white spaces
  var check5=/\s\S/;
  if(check5.test(password)){
    al.innerHTML = "Password must not contain white spaces";
    bar.style.backgroundColor = "red";
  }
}