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

2019-11-19 18:07:11

字体：大中小

来源：转载

供稿：网友

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

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

上一篇：微信小程序 tabs选项卡效果的实现

下一篇：jquery广告无缝轮播实例