Regelmäßige JavaScript-Implementierungsmethode zur Überprüfung der Kennwortstärke

ausstellen

Design

Passwortstärke-Analyse

Das Passwort besteht aus Zahlen, Buchstaben und Sonderzeichen

Passwort: Nur Zahlen - oder nur Buchstaben, oder nur Sonderzeichen - Level 1: Schwach
Zwei-mal-zwei-Kombinationen: Zahlen und Buchstaben, Zahlen und Sonderzeichen, Buchstaben und Sonderzeichen - Level 2: Mittel
Alle drei: Zahlen, Buchstaben und Sonderzeichen - Level 3: Stark

Code

Version 1: Basic

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Dokument</title>
</Kopf>
<style type="text/css">
  #dv{
    Breite: 300px;
    Höhe: 200px;
    Position: absolut;
    links: 100px;
    oben: 100px;
  }
  .stärkeLv0 {
    Höhe: 6px;
    Breite: 120px;
    Rand: 1px durchgezogen #ccc;
    Polsterung: 2px;
  }

  .stärkeLv1 {
    Hintergrund: rot;
    Höhe: 6px;
    Breite: 40px;
    Rand: 1px durchgezogen #ccc;
    Polsterung: 2px;
  }

  .stärkeLv2 {
    Hintergrund: orange;
    Höhe: 6px;
    Breite: 80px;
    Rand: 1px durchgezogen #ccc;
    Polsterung: 2px;
  }

  .stärkeLv3 {
    Hintergrund: grün;
    Höhe: 6px;
    Breite: 120px;
    Rand: 1px durchgezogen #ccc;
    Polsterung: 2px;
  }
</Stil>
<Text>
<div id="dv">
  <label for="password">Passwort</label>
  <input type="text" id="passwort" maxlength="16">
  <div>
    <b>Passwortstärke:</b>
    <em id="Stärke"></em>
    <div id="StärkeLevel" Klasse="StärkeLv0"></div>
  </div>
</div>
<Skript>
  Funktion meine$(id) {
      gibt document.getElementById(id) zurück;
  }

<Skript>


 //Textfeld abrufen, um das Ereignis „Tastatur loslassen“ zu registrieren my$("password").onkeyup=function () {
   //Jedes Mal, wenn die Tastatur angehoben wird, muss der Inhalt des Textfelds abgerufen werden. Der Inhalt des Textfelds muss überprüft werden. Außerdem muss ein Level abgerufen werden. Anschließend zeigt das Div darunter die entsprechende Farbe an. //Wenn die Kennwortlänge weniger als 6 beträgt, muss nicht beurteilt werden, ob (this.value.length>=6) {
     var lvl = getLvl(dieser.Wert);
     wenn(lvl==1){
       //schwach mein$("strengthLevel").className="strengthLv1";
     }sonst wenn(lvl==2){
       mein$("strengthLevel").className="strengthLv2";
     }sonst wenn(lvl==3){
       mein$("strengthLevel").className="strengthLv3";
     }anders{
       mein$("strengthLevel").className="strengthLv0";
     }
   }anders{
     mein$("strengthLevel").className="strengthLv0";
   }


 };

 //Gib mir das Passwort und ich gebe das entsprechende Level zurück Funktion getLvl(password) {
   var lvl=0;//Standard ist Level 0//Ob das Passwort Zahlen, Buchstaben oder Sonderzeichen enthält if(/[0-9]/.test(password)){
     Stufe++;
   }
   // Prüfen, ob das Passwort Buchstaben enthält if(/[a-zA-Z]/.test(password)){
     Stufe++;
   }
   // Prüfen Sie, ob das Passwort Sonderzeichen enthält if(/[^0-9a-zA-Z_]/.test(password)){
     Stufe++;
   }
   Rückkehrstufe;//1 3
 }

</Skript>
</body>
</html>

Der obige Code ist etwas redundant, deshalb aktualisieren und schreiben wir ihn neu

Version 2: Upgrade

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Dokument</title>
</Kopf>
<style type="text/css">
  #dv{
    Breite: 300px;
    Höhe: 200px;
    Position: absolut;
    links: 100px;
    oben: 100px;
  }
  .stärkeLv0 {
    Höhe: 6px;
    Breite: 120px;
    Rand: 1px durchgezogen #ccc;
    Polsterung: 2px;
  }

  .stärkeLv1 {
    Hintergrund: rot;
    Höhe: 6px;
    Breite: 40px;
    Rand: 1px durchgezogen #ccc;
    Polsterung: 2px;
  }

  .stärkeLv2 {
    Hintergrund: orange;
    Höhe: 6px;
    Breite: 80px;
    Rand: 1px durchgezogen #ccc;
    Polsterung: 2px;
  }

  .stärkeLv3 {
    Hintergrund: grün;
    Höhe: 6px;
    Breite: 120px;
    Rand: 1px durchgezogen #ccc;
    Polsterung: 2px;
  }
</Stil>
<Text>
<div id="dv">
  <label for="password">Passwort</label>
  <input type="text" id="password" maxlength="16"><!--Außerschulische Themen-->
  <div>
    <b>Passwortstärke:</b>
    <em id="Stärke"></em>
    <div id="StärkeLevel" Klasse="StärkeLv0"></div>
  </div>
</div>
<!-- <script src="common.js"></script> -->
<Skript>
  Funktion meine$(id) {
      gibt document.getElementById(id) zurück;
  }
  //Textfeld abrufen, um das Ereignis „Tastatur loslassen“ zu registrieren my$("password").onkeyup=function () {
    //Jedes Mal, wenn die Tastatur angehoben wird, den Inhalt des Textfelds abrufen, überprüfen, was sich im Textfeld befindet, eine Ebene abrufen und dann das darunter liegende Div in der entsprechenden Farbe anzeigen my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value) :0);
  };

  //Gib mir das Passwort und ich gebe das entsprechende Level zurück Funktion getLvl(password) {
    var lvl=0;//Standard ist Level 0//Ob das Passwort Zahlen, Buchstaben oder Sonderzeichen enthält if(/[0-9]/.test(password)){
      Stufe++;
    }
    // Prüfen, ob das Passwort Buchstaben enthält if(/[a-zA-Z]/.test(password)){
      Stufe++;
    }
    // Prüfen Sie, ob das Passwort Sonderzeichen enthält if(/[^0-9a-zA-Z_]/.test(password)){
      Stufe++;
    }
    return lvl; //Der Minimalwert ist 1, der Maximalwert ist 3
  }


</Skript>
</body>
</html>

Dies ist das Ende dieses Artikels über die Implementierungsmethode zur Überprüfung regulärer JavaScript-Passwörter. Weitere relevante Inhalte zur Stärke regulärer JavaScript-Passwörter finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren: