Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der Verwendung der jQuery-Kontrolle zur Überprüfung der Passwortstärke

Ausführliche Erläuterung der Verwendung der jQuery-Kontrolle zur Überprüfung der Passwortstärke

高洛峰Original: 2017-01-07 11:18:421129Durchsuche

Das Beispiel in diesem Artikel stellt die Überprüfung der jQuery-Passwortstärke als Referenz dar. Der spezifische Inhalt lautet wie folgt:

<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 >= &#39;0&#39; && item <= &#39;9&#39;) { hasNumber = 1; }
            else if ((item >= &#39;a&#39; && item <= "z") || (item >= &#39;A&#39; && 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 == &#39;&#39;) {
          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>

Das Obige ist der gesamte Inhalt dieses Artikels zu Ihrer Studie. Duoduo unterstützt die chinesische PHP-Website.

Ausführlichere Erläuterungen zur Verwendung der jQuery-Kontrolle zur Überprüfung der Passwortstärke und verwandte Artikel finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Mit JS HTML-Tabellen hinzufügen, löschen und ändernNächster Artikel：Mit JS HTML-Tabellen hinzufügen, löschen und ändern

In Verbindung stehende Artikel

Mehr sehen