js Passwortstärke Echtzeiterkennung Code_Javascript-Kenntnisse

Die Beurteilung der Passwortstärke muss bei der Registrierung eines Website-Benutzers erfolgen. Verschiedene Websites implementieren dies auf unterschiedliche Weise Die Passwortbeurteilung ist tatsächlich einer der Aspekte der Formularüberprüfung. Lassen Sie uns einen so einfachen Vorgang implementieren.

Erstellen Sie zunächst ein einfaches Passwort-Eingabefeld und einen Fortschrittsbalken, der die Passwortstärke anzeigt. Das Ganze wird durch das Feld „vali_pass“ abgedeckt. Das dritte Feld ist der Stärke-Fortschrittsbalken

<div class="vali_pass">
  <h3>简单的密码强度检测</h3>
  <input type="password" name="pass">
  <div class="vali_pass_progress">
    <span class="vali_pass_inner_progress"></span>
  </div>
</div>

Verwenden wir CSS, um es zu verschönern

.vali_pass {
  width: 350px;
  margin: 0 auto;
  padding: 10px;
  border: #eee 1px solid;
  text-align: center;
}
.vali_pass input {
  width: 96%;
  display: block;
  margin: 0;
  padding: 5px;
  font-size: 14px;
  line-height: 20px;
}
.vali_pass_progress {
  margin-top: 10px;
  background-color: #efefef;
  height: 10px;
  border-radius: 5px;
}
.vali_pass_inner_progress {
  display: block;
  height: 100%;
  background-color: transparent;
  border-radius: 5px;
  width: 100%;
}

Was wir zu diesem Zeitpunkt berücksichtigen müssen, ist, dass dieser Fortschrittsbalken mehrere Zustände haben kann, wenn der Pegel niedrig ist, welcher Status angezeigt wird, wenn der Pegel mittel ist, und welcher Status angezeigt wird, wenn der Pegel niedrig ist hoch.

OK, wenn wir es hier verwenden, steuern wir die Breite und Hintergrundfarbe des Felds innerhalb der Fortschrittsleiste. Stellen Sie es auf drei Stile ein

.error {
 background-color: #ff3300;
}
.middle {
 background-color: gold;
}
.strong {
 background-color: green;
}

Auf diese Weise sind die HTML-Struktur und die CSS-Verschönerung abgeschlossen. Lassen Sie uns nun die JS-Überwachung durchführen.

Das erste, was unabdingbar ist, ist, dem Passworteingabefeld eine Texteingabeüberwachung hinzuzufügen

ele_pass.onkeyup = function () {...}

Die Passwortbeurteilung muss innerhalb dieses Ereignisses verarbeitet werden. Vor der Verarbeitung müssen wir jedoch einige Daten initialisieren, beispielsweise den regulären Ausdruck für die Passwortbeurteilung.

var regxs = [];
regxs.push(/[^a-zA-Z0-9_]/g);
regxs.push(/[a-zA-Z]/g);
regxs.push(/[0-9]/g);

Ich habe hier drei reguläre Regeln verwendet, um den Übereinstimmungsgrad des Passworts nach Abschluss der Dateninitialisierung zu beurteilen. Zuerst wird der Wert des Eingabefelds und dann seine Länge ermittelt Kontrollieren Sie die Länge hier auf mindestens 6 Sekunden. Zur Erhöhung der Sicherheit wird jedes Mal, wenn ein Ausdruck in der regulären Übereinstimmung gefunden wird, die Sicherheit des Passworts angegeben das Passwort. Mit diesem Wert lässt sich bequem die Breite des internen Fortschrittsbalkens steuern.

ele_pass.onkeyup = function () {
  var val = this.value;
  var len = val.length;
  var sec = 0;
  if (len >= 6) { // 至少六个字符
    for (var i = 0; i < regxs.length; i++) {
      if (val.match(regxs[i])) {
        sec++;
      }
    }
  }
  var result = (sec / regxs.length) * 100;
  ele_progress.style.width = result + "%";
}

Nachdem wir die Breite des Fortschrittsbalkens kontrolliert haben, können wir den vorherigen CSS-Code nicht sehen. Dann müssen wir verschiedene Sicherheitswerte steuern seine Hintergrundfarbe. Der folgende Code wird verwendet, um seine Hintergrundfarbe zu steuern.

if(result > 0 && result <= 50){
  ele_progress.setAttribute("class",begin_classname + " error");
}else if (result > 50 && result < 100) {
  ele_progress.setAttribute("class",begin_classname + " middle");
} else if (result == 100) {
  ele_progress.setAttribute("class",begin_classname + " strong");
}

Letzter JS-Code:

var ele_pass = document.getElementsByTagName("input")[0];
var ele_progress = document.getElementsByClassName("vali_pass_inner_progress")[0];
var begin_classname = ele_progress.className;
var regxs = [];
regxs.push(/[^a-zA-Z0-9_]/g);
regxs.push(/[a-zA-Z]/g);
regxs.push(/[0-9]/g);

ele_pass.onkeyup = function () {
  var val = this.value;
  var len = val.length;
  var sec = 0;
  if (len >= 6) { // 至少六个字符
    for (var i = 0; i < regxs.length; i++) {
      if (val.match(regxs[i])) {
        sec++;
      }
    }
  }
  var result = (sec / regxs.length) * 100;
  ele_progress.style.width = result + "%";
  if(result > 0 && result <= 50){
    ele_progress.setAttribute("class",begin_classname + " error");
  }else if (result > 50 && result < 100) {
    ele_progress.setAttribute("class",begin_classname + " middle");
  } else if (result == 100) {
    ele_progress.setAttribute("class",begin_classname + " strong");
  }

}

Dann werfen wir einen Blick auf unsere Wirkung:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der Javascript-Programmierung hilfreich sein wird.