Hur skapa: lösenordsverifiering

Lär dig hur du skapar lösenordsverifieringsformulär med CSS och JavaScript.

亲自试一试

Skapa lösenordsverifieringsformulär

Steg 1 - Lägg till HTML:

<div class="container">
  <form action="/action_page.php">
    <label for="usrname">Username</label>
    <input type="text" id="usrname" name="usrname" required>
    <label for="psw">Lösenord</label>
    <input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Måste innehålla minst en siffra och en stor och liten bokstav, och minst 8 eller fler tecken" required>
    <input type="submit" value="Skicka">
  </form>
</div>
<div id="message">
  <h3>Lösenordet måste innehålla följande:</h3>
  <p id="letter" class="invalid">En <b>liten bokstav</b> bokstav</p>
  <p id="capital" class="invalid">En <b>stor bokstav</b> bokstav</p>
  <p id="number" class="invalid">Ett <b>nummer</b></p>
  <p id="length" class="invalid">Minsta <b>8 tecken</b></p>
</div>

Observera:Vi använder pattern-attributet (med reguljära uttryck) i lösenordsfältet för att ställa in begränsningar för att skicka formulär: Måste innehålla minst 8 tecken, varav minst en siffra, en stor bokstav och en liten bokstav.

Steg 2 - Lägg till CSS:

Ange stil för inmatningsfält och meddelandefack:

/* Ange stil för alla inmatningsfält */
input {
  bredd: 100%;
  inmatningsmarginal: 12px;
  kanter: 1px solid #ccc;
  kantradie: 4px;
  box-sizing: border-box;
  marginal-topp: 6px;
  marginal-botten: 16px;
}
/* Ange stil för inmatningsknappen */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
}
/* Ställ in stilen för inmatningskontainer */
.container {
  background-color: #f1f1f1;
  padding: 20px;
}
/* Visa meddelandefönstret när användaren klickar på lösenordsfältet */
#message {
  display:none;
  background: #f1f1f1;
  color: #000;
  position: relative;
  padding: 20px;
  margin-top: 10px;
}
#message p {
  padding: 10px 35px;
  font-size: 18px;
}
/* När det finns ett krav på korrekt, lägg till grön textfärg och ett ikon för kryss. */
.valid {
  color: green;
}
.valid:before {
  position: relative;
  left: -35px;
  content: "✔";
}
/* När det finns ett krav på fel, lägg till röd textfärg och en "x"-ikon. */
.invalid {
  color: red;
}
.invalid:before {
  position: relative;
  left: -35px;
  content: "✖";
}

Steg 3 - Lägg till JavaScript:

<script>
var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");
// När användaren klickar på lösenordsfältet, visa meddelandefönstret
myInput.onfocus = function() {
  document.getElementById("message").style.display = "block";
}
// När användaren klickar utanför lösenordsfältet, göm meddelandefönstret
myInput.onblur = function() {
  document.getElementById("message").style.display = "none";
}
// När användaren börjar skriva in innehåll i lösenordsfältet
myInput.onkeyup = function() {
  // Verifiera små bokstäver
  var lowerCaseLetters = /[a-z]/g;
  om(myInput.value.match(lowerCaseLetters)) {
    letter.classList.remove("invalid");
    letter.classList.add("valid");
  } annars {
    letter.classList.remove("valid");
    letter.classList.add("invalid");
}
  // Verifiera stora bokstäver
  var upperCaseLetters = /[A-Z]/g;
  om(myInput.value.match(upperCaseLetters)) {
    capital.classList.remove("invalid");
    capital.classList.add("valid");
  } annars {
    capital.classList.remove("valid");
    capital.classList.add("invalid");
  }
  // Verifiera siffror
  var numbers = /[0-9]/g;
  om(myInput.value.match(numbers)) {
    number.classList.remove("invalid");
    number.classList.add("valid");
  } annars {
    number.classList.remove("valid");
    number.classList.add("invalid");
  }
  // Verifiera längd
  om(myInput.value.length >= 8) {
    length.classList.remove("invalid");
    length.classList.add("valid");
  } annars {
    length.classList.remove("valid");
    length.classList.add("invalid");
  }
}
</script>

亲自试一试

Prova själv

Relaterade sidorHTML-formulär