jQuery密码强度验证控件使用详解

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# jQuery密码强度验证控件 # jQuery密码强度验证 # jQuery验证控件 # 基于JQuery的密码强度验证代码 # jquery判断密码强度的验证代码 # jQuery判断密码强度实现思路及代码 # passwordStrength 基于jquery的密码强度检测代码使用介绍 # jquery密码强度校验 # jQuery实现提示密码强度的代码 # jQuery密码强度检测插件passwordStrength用法实例分析 # jQuery插件passwordStrength密码强度指标详解 # jQuery实用密码强度检测 # jQuery实现注册会员时密码强度提示信息功能示例 # 两种 # 请输入 # 大家分享 # 具体内容 # 大家多多 # 长度为 # 新密码 # padding # hidden # inline # display # block # overflow # border # mainPrompt # solid # radius # px # height # eeeeee

返回目录在线咨询

上一篇： ,电音秘宝语音包怎么获得？
下一篇：如何在Golang中实现Cookie管理_使用http.SetCookie和获取Cookie

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

jQuery密码强度验证控件使用详解

您的项目需求