suchen

Heim >Web-Frontend >js-Tutorial >jQuery-Plug-in zur Erkennung der Passwortstärke, Beispiel für die Verwendung von Passwortstärke, Analysis_jquery

jQuery-Plug-in zur Erkennung der Passwortstärke, Beispiel für die Verwendung von Passwortstärke, Analysis_jquery

WBOY
WBOYOriginal
2016-05-16 15:34:211547Durchsuche

Das Beispiel in diesem Artikel beschreibt die Verwendung des jQuery-Plug-ins zur Erkennung der Passwortstärke „passwordStrength“. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier wird die Passwortstärke auf 10 Stufen festgelegt (progressImg1.png im Beispiel ist ein Bild mit zehn Zuständen), und dann wird die Stärke des aktuellen Passworts visuell angezeigt, indem der CSS-Stil für jeden Zustand festgelegt wird. Der entscheidende Punkt und die Schwierigkeit bei der Umsetzung dieser Funktion besteht darin, das Niveau anhand regelmäßiger Regeln zu beurteilen. Interessierte Freunde können sie langsam erkunden.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-passwordStrength-plugs-codes/

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery密码强度插件passwordStrength实例演示</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script src="jquery.passwordStrength.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  var $pwd = $('input[name="password"]');
  $pwd.passwordStrength();
  $(".Generate_password").click(function(){
  //产生随机八位密码
  var pwd = $.passwordStrength.getRandomPassword(8);
  //将随机密码写入密码框，并触发验证
  $pwd.val(pwd).trigger("keyup");
  return false;
  })
});
</script>
<style type="text/css">
body{font-size:12px;}
.clearfix:after{
content:"."; display:block; height:0; clear:both;
visibility:hidden;
}
*html .clearfix{
 height:1%;
}
*+html .clearfix{
 height:1%;
}
.l{float:left;}
.form_item{margin-bottom:6px;}
.form_item label{width:100px;text-align:right;margin-right:4px;display:block;float:left;padding-top:2px;}
.form_item .text{height:14px;padding:2px;width:132px;border:1px solid #999;}
.form_item div a{margin-left:6px;}
#passwordStrengthDiv{margin-top:6px;}
.is0{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;}
.is10{background-position:0 -7px;}
.is20{background-position:0 -14px;}
.is30{background-position:0 -21px;}
.is40{background-position:0 -28px;}
.is50{background-position:0 -35px;}
.is60{background-position:0 -42px;}
.is70{background-position:0 -49px;}
.is80{background-position:0 -56px;}
.is90{background-position:0 -63px;}
.is100{background-position:0 -70px;}
</style>
</head>
<body>
<script type="text/javascript"> 
if(document.getElementById('GoogleAD')!=null){
document.getElementById('GoogleAD').innerHTML = '<div class="SearchEngine_AD1">' + document.getElementById('GoogleADCode').innerHTML + '</div>';
}
</script>
<div class="form_item clearfix">
<label>密  码：</label>
<div class="l">
  <div><input name="password" type="text" class="text" maxlength="16"/><a href="" class="Generate_password">产生随机密码</a></div>
  <div id="passwordStrengthDiv" class="is0"></div> 
 </div>
</div>
</body>
</html>

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

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：Vollständiges Beispiel für die JS-Implementierung der Anzeige des Tippeffekts in Statusleiste_Javascript-FähigkeitenNächster Artikel：Vollständiges Beispiel für die JS-Implementierung der Anzeige des Tippeffekts in Statusleiste_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen