suchen

Heim >Web-Frontend >js-Tutorial >Regulärer Ausdruck zur Überprüfung der JS-Passwortstärke (mit Code)

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

php中世界最好的语言
php中世界最好的语言Original
2018-03-29 18:00:132993Durchsuche

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>
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];
};
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!

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：Die reguläre Überprüfung in JQ kann keine chinesischen Methoden enthaltenNächster Artikel：Die reguläre Überprüfung in JQ kann keine chinesischen Methoden enthalten

In Verbindung stehende Artikel

Mehr sehen