主页 / 网络编程 /

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

网络编程 2021-07-04 19:20www.168986.cn编程入门
这篇文章主要为大家详细介绍了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>

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

上一篇：微信小程序 tabs选项卡效果的实现 下一篇：jquery广告无缝轮播实例

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by