JavaScript パスワードが間違って入力され、再入力されました

JavaScript 間違ったパスワードの再入力

インターネットの継続的な発展と普及に伴い、オンラインでのやり取りにさまざまなアプリケーションを使用する人がますます増えており、これらのアプリケーションにはアカウントとパスワードが必要です。アカウントのセキュリティを確保するために、多くのアプリケーションでは、パスワードが間違って入力された場合、ユーザーがパスワードを再入力するまで一定時間待機する必要があるメカニズムをセットアップします。このメカニズムを実装するには、プログラミングに JavaScript を使用する必要があります。

今回は、パスワードリトライを実現するためのJavaScriptの書き方と実装内容をサンプルプログラムを用いて詳しく説明します。

サンプル プログラムの要件分析:

このサンプル プログラムの要件は次のとおりです:

1. ユーザーがログインに失敗した場合、ユーザーは 5 待つ必要があります。パスワードを再入力するまでの秒数。
2. ユーザーは、毎回 3 回を超えて間違ったパスワードを入力することはできません。
3. ユーザーが間違ったパスワードを 3 回続けて入力した場合、パスワードを再入力するまで 180 秒待つ必要があります。

上記の要件に基づいて、JavaScript コードを次のように記述できます:

// 定义密码输入错误次数的变量
var count = 0;

// 定义是否需要等待的布尔变量
var wait = false;

// 定义等待时间的变量
var time = 0;

// 监听登录按钮的点击事件
document.getElementById("login").onclick = function() {
   // 获取用户输入的密码和用户名
   var username = document.getElementById("username").value;
   var password = document.getElementById("password").value;
  
   // 判断是否需要等待
   if (wait) {
      // 提示用户需要等待
      alert("请" + time + "秒后重试！");
      return;
   }
  
   // 判断用户名和密码是否正确
   if (username === "admin" && password === "123456") {
      // 登录成功，跳转到主页面
      location.href = "main.html";
   } else {
      // 登录失败，提示用户重新输入密码
      alert("用户名或密码错误！");
      count++;

      // 判断是否需要等待
      if (count >= 3) {
         // 需要等待 180 秒
         count = 0;
         wait = true;
         time = 180;
         setInterval(function() {
            time--;
            if (time == 0) {
               wait = false;
            }
         }, 1000);
      } else {
         // 需要等待 5 秒
         wait = true;
         time = 5;
         setInterval(function() {
            time--;
            if (time == 0) {
               wait = false;
            }
         }, 1000);
      }
   }
}

コード分析:

上記のコードでは、最初に 3 つの変数 count を定義します。 、wait と time は、ユーザーが間違ったパスワードを入力した回数、待つ必要があるかどうか、および待ち時間をそれぞれ記録するために使用されます。

次に、ログイン ボタンのクリック イベントをリッスンし、クリック イベントのハンドラー関数で、まずユーザーが入力したユーザー名とパスワードを取得し、待機する必要があるかどうかを判断します。待つ必要がある場合は、ユーザーに直接待ってから戻るように促します。

待つ必要がない場合は、入力されたユーザー名とパスワードが正しいかどうかを判断します。正しい場合はメイン ページにジャンプし、間違っている場合はユーザーにパスワードの再入力を求め、間違ったパスワードの入力回数が 1 ずつ増えます。

間違ったパスワードを 3 回以上入力した場合、パスワードを再入力するまで 180 秒待つ必要があります。待機プロセス中に、wait を true に設定し、時間を 180 に設定し、setInterval タイマーを使用して、待機時間が 0 になるまで 1 秒ごとに時間を 1 秒ずつ減らします。待機時間が 0 に達したら、wait を false に設定できます。

間違ったパスワードが 3 回以内に入力された場合は、パスワードを再入力するまで 5 秒待つ必要があり、同様の方法を使用して待ち時間のタイミングと制御機能を実装します。

要約:

上記のコードの導入を通じて、間違ったパスワードを再試行する JavaScript の機能は複雑ではなく、基本的な論理判断とタイマー制御のみが必要であることがわかります。 。もちろん、実装時には入力セキュリティ、インターフェースのレイアウトなどの要素を考慮する必要があり、これらの要素は実際の作成時に実際のニーズに応じて特別に調整および最適化する必要があります。

以上がJavaScript パスワードが間違って入力され、再入力されましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。