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

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

韦小宝

Freigeben： 2018-01-15 11:22:32

Original

1741 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!