这篇文章主要为大家详细介绍了jQuery密码强度验证控件使用详解的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

这篇文章主要为大家详细介绍了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;

         56px;

        margin-right: 2px;



      }

      .bot_text span {

         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>
相关阅读:
selenium实战
 selenium+unittest实现po模型
 IDE自动化脚本实现
 web 自动化测试
 requests 遇到报错UnicodeEncodeError: 'latin-1' codec can't encode character 'u86c7' in position 8: Body ('蛇') is not valid Latin-1. Use body.encode('utf-8') if you want to send it encoded in UTF-8.
通过requests + pytest + allure 实现接口自动化测试
 python pytest单元测试
 python unittest单元测试
 laili和网路知识
 网络-单臂路由
原文地址：https://www.cnblogs.com/sjqq/p/6491236.html