欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2023-12-02 21:23:16
本文实例为大家分享了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>

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

上一篇： 微信小程序 数组中的push与concat的区别

下一篇： 几个简单的基本的sql语句

推荐阅读