JavaScript melaksanakan pengesahan log masuk

Dengan populariti Internet, pelbagai laman web dan aplikasi mempunyai lebih banyak permintaan untuk log masuk pengguna. Masalah seterusnya ialah keselamatan akaun pengguna dan maklumat peribadi menjadi lebih kritikal. Oleh itu, untuk memastikan keselamatan akaun pengguna, pengesahan log masuk telah menjadi sangat penting. Artikel ini akan memperkenalkan cara menggunakan javascript untuk melaksanakan fungsi pengesahan log masuk yang mudah.

1. Mendapatkan input pengguna

Pertama sekali, pada tapak web atau aplikasi, langkah pertama dalam pengesahan log masuk ialah mendapatkan nombor akaun dan kata laluan yang dimasukkan oleh pengguna. Di halaman hujung hadapan, kita boleh menggunakan elemen bentuk HTML untuk mencapai matlamat ini. Contohnya:

<form>
  <label>账号:</label>
  <input type="text" id="username">
  <label>密码:</label>
  <input type="password" id="password">
  <button id="submitBtn" type="button">登陆</button>
</form>

Dalam borang ini, kami menggunakan dua elemen input untuk mendapatkan nombor akaun dan kata laluan yang dimasukkan oleh pengguna, dan menggunakan elemen butang untuk mencetuskan fungsi pengesahan log masuk.

2. Memproses input pengguna

Selepas mendapatkan input pengguna, kami perlu memproses nilai yang dimasukkan oleh pengguna. Pertama, kita perlu mendapatkan nilai akaun dan kata laluan Anda boleh menggunakan kaedah getElementById dalam javascript untuk mendapatkan elemen dalam halaman. Contohnya:

var username = document.getElementById("username").value;
var password = document.getElementById("password").value;

Di sini, kami mendapat elemen kotak input dan nilai yang dimasukkan oleh pengguna melalui atribut nilai.

Seterusnya, kita boleh melakukan beberapa semakan pada nilai yang dimasukkan oleh pengguna. Sebagai contoh, semak sama ada kotak input kosong atau sama ada input mematuhi format yang ditentukan. Contohnya:

if(username === ""){
   alert("请输入账号！");
   return;
}

if(password === ""){
  alert("请输入密码！");
  return;
}

if(username.length < 6 || username.length > 20){
  alert("账号长度应为6-20个字符！");
  return;
}

Di sini, kami telah melakukan beberapa semakan asas pada nilai akaun dan kata laluan Jika mereka tidak memenuhi keperluan, kotak gesaan yang sepadan akan muncul dan langkah pengesahan seterusnya tidak akan dilakukan.

3. Sahkan input pengguna

Selepas memproses input pengguna, kami perlu menghantar nombor akaun dan kata laluan yang diperoleh kepada pelayan untuk pengesahan dalam persekitaran sebenar, pelayan akan mengesahkan akaun nombor yang dimasukkan oleh pengguna Padankan kata laluan dengan pangkalan data Jika perlawanan berjaya, mesej kejayaan log masuk akan dikembalikan.

Dalam contoh ini, kami mensimulasikan proses pengesahan pelayan. Kami boleh menentukan fungsi untuk mengesahkan nilai akaun dan kata laluan yang dimasukkan oleh pengguna. Contohnya:

function verify(username, password){
  if(username === "admin" && password === "123456"){
    return true;
  }else{
   return false;
  }
}

Di sini, kami menganggap nombor akaun dan kata laluan tetap Jika nombor akaun dan kata laluan yang dimasukkan memenuhi syarat ini, fungsi itu akan kembali benar, jika tidak ia akan mengembalikan palsu.

Semasa mengesahkan, kami perlu memanggil fungsi ini dan lulus nombor akaun dan kata laluan yang diperoleh sebagai parameter. Contohnya:

if(verify(username,password)){
  alert("登陆成功！");
}else{
  alert("账号或密码错误，请重新输入！");
}

Di sini, jika pengesahan berjaya, kotak gesaan "Log Masuk Berjaya" akan muncul, jika tidak, kotak gesaan "Akaun atau Kata Laluan Salah" akan muncul, meminta pengguna untuk masuk semula .

4. Kod lengkap

Digabungkan dengan langkah di atas, kami boleh melaksanakan sepenuhnya fungsi pengesahan log masuk yang mudah. Kod lengkap adalah seperti berikut:

  
  


<form>
  <label>账号:</label>
  <input type="text" id="username">
  <label>密码:</label>
  <input type="password" id="password">
  <button id="submitBtn" type="button">登陆</button>
</form>

<script>
  var submitBtn = document.getElementById("submitBtn");
  submitBtn.addEventListener("click", function(){
      var username = document.getElementById("username").value;
      var password = document.getElementById("password").value;

      if(username === ""){
         alert("请输入账号！");
         return;
      }

      if(password === ""){
        alert("请输入密码！");
        return;
      }

      if(username.length < 6 || username.length > 20){
        alert("账号长度应为6-20个字符！");
        return;
      }

      if(verify(username,password)){
        alert("登陆成功！");
      }else{
        alert("账号或密码错误，请重新输入！");
      }

  });

  function verify(username, password){
    if(username === "admin" && password === "123456"){
      return true;
    }else{
      return false;
    }
  }

</script>

Melalui kod di atas, kita boleh memahami cara menggunakan javascript untuk melaksanakan fungsi pengesahan log masuk yang mudah Untuk aplikasi web sebenar, algoritma dan kaedah yang lebih kompleks diperlukan untuk memastikan pengguna akaun selamat.

Atas ialah kandungan terperinci JavaScript melaksanakan pengesahan log masuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!