Antara muka log masuk JavaScript berjaya melompat-Soal Jawab bahagian hadapan-php.cn

Antara muka log masuk JavaScript berjaya melompat

WBOY

Lepaskan： 2023-05-09 22:46:08

asal

2868 orang telah melayarinya

Dalam bidang pembangunan web moden, antara muka log masuk adalah ciri yang sangat biasa. Dalam dunia JavaScript, kita boleh menggunakan banyak perpustakaan dan rangka kerja untuk mencapai fungsi ini. Artikel ini akan menggunakan contoh mudah untuk menunjukkan cara menggunakan JavaScript untuk menulis antara muka log masuk dan berjaya melompat ke halaman.

Pertama, kita perlu mencipta borang log masuk dalam halaman HTML. Borang tersebut hendaklah mengandungi medan nama pengguna dan kata laluan dan juga harus mempunyai butang hantar. Kodnya adalah seperti berikut:

<form>
  <div>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>
  </div>
  <div>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
  </div>
  <div>
    <button type="submit" id="login-button">登录</button>
  </div>
</form>

Salin selepas log masuk

Jika anda perlu menambah beberapa gaya pada borang ini, anda boleh menggunakan helaian gaya CSS untuk menetapkannya.

Seterusnya, kita perlu menulis kod JavaScript untuk melaksanakan pengesahan log masuk dan fungsi lompat halaman. Kita boleh menggunakan perpustakaan jQuery untuk memudahkan tugas. Kodnya adalah seperti berikut:

$(document).ready(function() {
  $('#login-button').click(function(event) {
    event.preventDefault();
    var username = $('#username').val();
    var password = $('#password').val();
    if (username == 'test' && password == '123') {
      window.location.href = 'success.html';
    } else {
      alert('用户名或密码错误！');
    }
  });
});

Salin selepas log masuk

Dalam kod di atas, kami mula-mula menggunakan fungsi $(document).ready() untuk mengikat peristiwa klik butang log masuk selepas halaman dimuatkan. Dalam pengendali acara klik, kami mula-mula menggunakan event.preventDefault() untuk menghalang kelakuan penyerahan lalai borang. Kami kemudian mendapat nilai nama pengguna dan kata laluan dari borang dan melakukan pengesahan mudah. Jika nama pengguna ialah test dan kata laluan ialah 123, maka kami menggunakan window.location.href untuk melompat ke halaman success.html. Jika pengesahan gagal, kotak gesaan akan muncul.

Akhir sekali, kita perlu mencipta halaman success.html pada pelayan. Halaman ini boleh memaparkan beberapa maklumat selamat datang atau kandungan lain untuk menunjukkan log masuk berjaya. Contohnya:

<html>
  <head>
    <title>登录成功</title>
  </head>
  <body>
    <h1>欢迎！</h1>
    <p>您已成功登录！</p>
  </body>
</html>

Salin selepas log masuk

Melalui langkah di atas, kami boleh menulis halaman web yang menggunakan JavaScript untuk melaksanakan pengesahan log masuk dan fungsi lompat halaman. Sudah tentu, terdapat banyak butiran dan sambungan yang boleh diselaraskan dan ditambah mengikut keperluan sebenar.

Atas ialah kandungan terperinci Antara muka log masuk JavaScript berjaya melompat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!