怎么样使用jQuery密码强度检测插件passwordStrength

发布网友发布时间：2022-04-22 05:18

共2个回答

懂视网时间：2022-05-16 10:26

本文实例为大家分享了jQuery密码强度验证控件，供大家参考，具体内容如下

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <script type="text/javascript" src="jquery-1.12.1.js"></script>
 <style type="text/css">
 .mainPrompt {
 border: #999 solid 1px;
 border-radius: 13px;
 overflow: hidden;
 padding: 1px 2px;
 display: inline-block;
 height: 20px;
 }
 .listPrompt {
 float: left;
 height: 20px;
 width: 56px;
 margin-right: 2px;
 background-color: #eeeeee;
 }
 .bot_text span {
 width: 52px;
 text-align: center;
 display: inline-block;
 line-height: 18px;
 }
 </style>
 </head>
 <body>
 <br/>
 <div>
 <p id="PromptMessage" style="margin-left: 200px;">
  新密码请至少使用字母、数字、符号两种<br/>类型组合的密码，长度为6~20位。</p>
 <input type="text" id="txtPassword" style="float: left;"/ placeholder="请输入密码">
 <div style="margin-left: 30px;font-size: 12px;float: left;">
 <div class="mainPrompt" align="center" bgcolor="#f5f5f5">
  <div class="listPrompt" id="strength_L" style="border-radius: 8px 0px 0px 8px;">
  </div>
  <div class="listPrompt" id="strength_M">
  </div>
  <div class="listPrompt" id="strength_H" style="margin-right: 0px;border-radius: 0 8px 8px 0;">
  </div>
 </div>
 <div class="bot_text">
  <span id="lowStrength">低</span> <span id="midStrength">
  中</span> <span id="highStrength">高</span>
 </div>
 </div>
 <div>
 <script type="text/javascript">
 function JudgyPwdLevel(pwdStr) {
 var hasNumber = 0;
 var hasLetter = 0;
 var hasSymbol = 0
 if (pwdStr.length >= 6) {
  for (var i = 0; i < pwdStr.length; i++) {
  var item = pwdStr[i];
  if (item >= '0' && item <= '9') { hasNumber = 1; }
  else if ((item >= 'a' && item <= "z") || (item >= 'A' && item < "Z")) { hasLetter = 1; }
  else { hasSymbol = 1; }
  }
 }
 return hasLetter + hasNumber + hasSymbol;
 }
 //显示颜色 
 function pwStrength(pwd) {
 O_color = "#eeeeee";
 L_color = "#FF0000";
 M_color = "#FF9900";
 H_color = "#33CC00";
 if (pwd == null || pwd == '') {
  Lcolor = Mcolor = Hcolor = O_color;
 }
 else {
  S_level = JudgyPwdLevel(pwd);
  switch (S_level) {
  case 0:
  Lcolor = Mcolor = Hcolor = O_color;
  case 1:
  Lcolor = L_color;
  Mcolor = Hcolor = O_color;
  break;
  case 2:
  Lcolor = L_color;
  Mcolor = M_color;
  Hcolor = O_color;
  break;
  default:
  Lcolor = L_color;
  Mcolor = M_color;
  Hcolor = H_color;
  }
 }
 document.getElementById("strength_L").style.background = Lcolor;
 document.getElementById("strength_M").style.background = Mcolor;
 document.getElementById("strength_H").style.background = Hcolor;
 return;
 }
 $("#txtPassword").keyup(function(e){
 pwStrength($(e.target).val());
 });
 
 </script>
 </body>
</html>

热心网友时间：2022-05-16 07:34

具体代码如下：
<!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>
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-passwordStrength-plugs-codes/