Regulärer Ausdruck zur Überprüfung der JS-Passwortstärke (mit Code)-js-Tutorial-php.cn

Regulärer Ausdruck zur Überprüfung der JS-Passwortstärke (mit Code)

php中世界最好的语言

Freigeben： 2018-03-29 18:00:13

Original

2974 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen den regulären Ausdruck zur JS-Passwortstärkeüberprüfung (mit Code) Was sind die Vorsichtsmaßnahmen für die Verwendung des regulären Ausdrucks zur JS-Passwortstärkeüberprüfung Praktischer Fall, werfen wir einen Blick darauf.

Ich habe kürzlich an einem Passprojekt gearbeitet. Bei der Passworteingabe im Registrierungsmodul muss die Passwortstärke (niedrig, mittel, hoch) angezeigt werden. Heute werde ich die Ergebnisse mit Ihnen teilen. Der Code ist nicht so kompliziert wie die Online-Suche und kann allgemeine Anforderungen erfüllen.

HTML-Code lautet wie folgt:

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>密码强度</title>
  <style type="text/css">
  #passStrength{height:6px;width:120px;border:1px solid #ccc;padding:2px;}
  .strengthLv1{background:red;height:6px;width:40px;}
  .strengthLv2{background:orange;height:6px;width:80px;}
  .strengthLv3{background:green;height:6px;width:120px;}
  </style>
</head>
<body>
  <input type="password" name="pass" id="pass" maxlength="16"/>
  <p class="pass-wrap">
    <em>密码强度：</em>
    <p id="passStrength"></p>
  </p>
</body>
</html>
<script type="text/javascript" src="js/passwordStrength.js"></script>
<script type="text/javascript">
new PasswordStrength('pass','passStrength');
</script>

Nach dem Login kopieren

JS-Code lautet wie folgt:

function PasswordStrength(passwordID,strengthID){
  this.init(strengthID);
  var _this = this;
  document.getElementById(passwordID).onkeyup = function(){
    _this.checkStrength(this.value);
  }
};
PasswordStrength.prototype.init = function(strengthID){
  var id = document.getElementById(strengthID);
  var p = document.createElement('p');
  var strong = document.createElement('strong');
  this.oStrength = id.appendChild(p);
  this.oStrengthTxt = id.parentNode.appendChild(strong);
};
PasswordStrength.prototype.checkStrength = function (val){
  var aLvTxt = ['','低','中','高'];
  var lv = 0;
  if(val.match(/[a-z]/g)){lv++;}
  if(val.match(/[0-9]/g)){lv++;}
  if(val.match(/(.[^a-z0-9])/g)){lv++;}
  if(val.length < 6){lv=0;}
  if(lv > 3){lv=3;}
  this.oStrength.className = 'strengthLv' + lv;
  this.oStrengthTxt.innerHTML = aLvTxt[lv];
};

Nach dem Login kopieren

Rendering:

Gebrauchsanweisung:

1. Der erste Parameter des Objekts ist die ID des Passworteingabefelds und der zweite Parameter ist die ID der Passwortstärkeleiste.

2. Die Passwortstärkeregeln können in der checkStrength-Methode angepasst werden.

3. Die Passwortstärke wird entsprechend 3 CSS-Stilen (StrengthLv1, StrengthLv2, StrengthLv3) angezeigt.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Wie man aufeinanderfolgende Zahlen mit regulären Ausdrücken abgleicht

Entwicklungserfahrung bei der Implementierung des Mindestabgleichs mit regulären Ausdrücken

Das obige ist der detaillierte Inhalt vonRegulärer Ausdruck zur Überprüfung der JS-Passwortstärke (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!