Heim > Artikel > Web-Frontend > Beispiel einer von JS implementierten Funktion zur Überprüfung der Passwortstärke basierend auf regulären Ausdrücken_Javascript-Kenntnissen

Beispiel einer von JS implementierten Funktion zur Überprüfung der Passwortstärke basierend auf regulären Ausdrücken_Javascript-Kenntnissen

韦小宝Original: 2018-01-15 11:22:321672Durchsuche

Dieser Artikel stellt hauptsächlich die von JS implementierte Funktion zur Überprüfung der Passwortstärke vor, die auf regulären Ausdrücken basiert und Javascript-Ereignis-Reaktionen sowie reguläre Charakterdurchquerung, Urteilsvermögen und andere damit verbundene Betriebsfähigkeiten umfasst. Freunde, die sich für JavaScript interessieren, können auf diesen Artikel verweisen

Dieser Artikel beschreibt die von JS basierende Funktion zur Überprüfung der Passwortstärke basierend auf regulären Ausdrücken. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Der spezifische Code lautet wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.php.cn  脚本之家</title>
</head>
<style type="text/css">
  body {
    background: #ccc;
  }
  label {
    width: 40px;
    display: inline-block;
  }
  span {
    color: red;
  }
  .container {
    margin: 100px auto;
    width: 400px;
    padding: 50px;
    line-height: 40px;
    border: 1px solid #999;
    background: #efefef;
  }
  span {
    margin-left: 30px;
    font-size: 12px;
  }
  .wrong {
    color: red
  }
  .right {
    color: green;
  }
  .strengthLv0 {
    height: 6px;
    width: 120px;
    border: 1px solid #ccc;
    padding: 2px;
  }
  .strengthLv1 {
    background: red;
    height: 6px;
    width: 40px;
    border: 1px solid #ccc;
    padding: 2px;
  }
  .strengthLv2 {
    background: orange;
    height: 6px;
    width: 80px;
    border: 1px solid #ccc;
    padding: 2px;
  }
  .strengthLv3 {
    background: green;
    height: 6px;
    width: 120px;
    border: 1px solid #ccc;
    padding: 2px;
  }
</style>
<body>
<p class="container">
  <label>密码</label>
  <input type="text" id="inp1" maxlength="16">
  <!--<input type="password" id="inp1" maxlength="16"/>-->
  <p class="pass-wrap">
    <em>密码强度：</em>
    <em id="strength"></em>
    <p id="strengthLevel" class="strengthLv0"></p>
  </p>
</p>
<script>
  var regEx = /^[1-9]\d{4,9}$/; //匹配qq号
  //找人
  var inp1 = document.getElementById("inp1");
  var strength = document.getElementById("strength");
  var strengthLevel = document.getElementById("strengthLevel");
  var arr = ["", "低", "中", "高"];
  inp1.onkeyup = function () {
    var level = 0;
    if (/[1-9]/.test(this.value)) {
      level++;
    }
    if (/[a-z]/.test(this.value)) {
      level++;
    }
    if (/[^a-z1-9]/.test(this.value)) {
      level++
    }
    if (this.value.length < 6) {
      level = 0;
    }
    strength.innerHTML = arr[level];
    strengthLevel.className = "strengthLv" + level;
  };
  /* inp1.onkeyup = function () {
   var level = 0;
   if (/[1-9]/.test(this.value)) {
   level++;
   }
   if (/[a-z]/.test(this.value)) {
   level++
   }
   if (/[^a-z0-9]/.test(this.value)) {
   level++
   }
   if (inp1.value.length < 6) {
   level = 0;
   }
   strengthLevel.className = "strengthLv"+level;
   strength.innerHTML = arr[level];
   };*/
</script>
</body>
</html>

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass dies möglich ist Helfen Sie allen beim Lernen! !

Verwandte Empfehlungen:

Detaillierte Erläuterung der sechs Fehlertypen in JavaScript

Drei Implementierungsmethoden von JavaScript-definierten Funktionen

So generieren Sie zufällig eine bestimmte Anzahl von Passwörtern mit Javascript

Das obige ist der detaillierte Inhalt vonBeispiel einer von JS implementierten Funktion zur Überprüfung der Passwortstärke basierend auf regulären Ausdrücken_Javascript-Kenntnissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JS-Methode zur Lösung des Position:Sticky-KompatibilitätsproblemsNächster Artikel：JS-Methode zur Lösung des Position:Sticky-Kompatibilitätsproblems

In Verbindung stehende Artikel

Mehr sehen