Kata laluan JavaScript dimasukkan dengan salah dan dimasukkan semula

Masukkan semula kata laluan JavaScript jika anda salah memasukkannya

Dengan perkembangan berterusan dan populariti Internet, semakin ramai orang mula menggunakan pelbagai aplikasi untuk interaksi dalam talian, dan aplikasi ini memerlukan akaun dan kata laluan . Untuk memastikan keselamatan akaun, banyak aplikasi akan menyediakan mekanisme yang apabila kata laluan dimasukkan dengan salah, pengguna mesti menunggu untuk tempoh masa sebelum memasukkan semula kata laluan. Pelaksanaan mekanisme ini memerlukan penggunaan JavaScript untuk pengaturcaraan.

Dalam artikel ini, kami akan menggunakan contoh program untuk menerangkan secara terperinci proses penulisan dan butiran pelaksanaan JavaScript untuk melaksanakan percubaan semula kata laluan.

Analisis keperluan program sampel:

Keperluan program sampel ini adalah seperti berikut:

1. Apabila pengguna gagal log masuk, dia mesti menunggu 5 beberapa saat sebelum memasukkan semula kata laluan .
2. Pengguna tidak boleh memasukkan kata laluan yang salah lebih daripada 3 kali pada satu masa.
3. Apabila pengguna memasukkan kata laluan yang salah 3 kali berturut-turut, mereka mesti menunggu 180 saat sebelum memasukkan semula kata laluan.

Berdasarkan keperluan di atas, kami boleh menulis kod JavaScript seperti berikut:

// 定义密码输入错误次数的变量
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);
      }
   }
}

Analisis kod:

Dalam kod di atas, kami mula-mula mentakrifkan tiga pembolehubah kiraan , tunggu dan masa digunakan untuk merekodkan bilangan kali pengguna telah memasukkan kata laluan yang salah, sama ada mereka perlu menunggu dan masa menunggu masing-masing.

Kemudian kami mendengar acara klik butang log masuk Dalam fungsi pengendali acara klik, kami mula-mula mendapatkan nama pengguna dan kata laluan yang dimasukkan oleh pengguna, dan kemudian menentukan sama ada kami perlu menunggu. Jika anda perlu menunggu, kemudian terus menggesa pengguna untuk menunggu dan kemudian kembali.

Jika tidak perlu menunggu, kami akan menentukan sama ada nama pengguna dan kata laluan yang dimasukkan adalah betul. Jika ia betul, ia akan melompat ke halaman utama; jika ia tidak betul, ia akan menggesa pengguna untuk memasukkan semula kata laluan, dan menambah bilangan entri kata laluan yang salah sebanyak 1.

Apabila kata laluan yang salah dimasukkan lebih daripada 3 kali, kita perlu menunggu 180 saat sebelum memasukkan semula kata laluan. Semasa proses menunggu, kami menetapkan tunggu kepada benar, masa kepada 180, dan menggunakan pemasa setInterval untuk mengurangkan masa sebanyak 1 saat setiap 1 saat sehingga masa menunggu ialah 0. Selepas masa menunggu mencapai 0, kita boleh menetapkan tunggu kepada palsu.

Jika kata laluan yang salah dimasukkan tidak lebih daripada 3 kali, maka kita perlu menunggu 5 saat sebelum memasukkan semula kata laluan, dan menggunakan kaedah yang sama untuk melaksanakan fungsi pemasaan dan kawalan masa menunggu.

Ringkasan:

Melalui pengenalan kod di atas, kita dapat melihat bahawa fungsi JavaScript untuk mencuba semula kata laluan yang salah tidak rumit dan hanya memerlukan beberapa pertimbangan logik asas dan kawalan pemasa dicapai. Sudah tentu, beberapa keselamatan input, susun atur antara muka dan faktor lain perlu diambil kira semasa pelaksanaan Faktor ini perlu diselaraskan dan dioptimumkan secara khusus mengikut keperluan sebenar semasa penulisan sebenar.

Atas ialah kandungan terperinci Kata laluan JavaScript dimasukkan dengan salah dan dimasukkan semula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!