HTML, CSS dan jQuery: Bina pengesahan borang log masuk yang cantik

HTML, CSS dan jQuery: Bina pengesahan borang log masuk yang cantik

Dalam pembangunan web, borang log masuk ialah komponen biasa. Pengesahan borang ialah langkah penting untuk memastikan keselamatan dan ketepatan apabila pengguna log masuk ke tapak web atau aplikasi. Artikel ini akan memperkenalkan cara membina pengesahan borang log masuk yang cantik menggunakan HTML, CSS dan jQuery, dan memberikan contoh kod khusus.

Langkah 1: Mulakan struktur HTML

Pertama, mari buat struktur HTML. Berikut ialah contoh borang log masuk asas:

<form id="login-form">
  <h2>用户登录</h2>
  <input type="text" id="username" placeholder="用户名">
  <input type="password" id="password" placeholder="密码">
  <button type="submit">登录</button>
</form>

Langkah Kedua: Tambah Gaya CSS

Untuk menjadikan borang log masuk kelihatan lebih cantik, kita perlu menambah beberapa gaya CSS padanya. Berikut ialah contoh CSS asas:

#login-form {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
}

h2 {
  margin-bottom: 20px;
}

input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

Langkah Tiga: Tulis Logik Pengesahan jQuery

Sekarang, mari gunakan jQuery untuk menambah logik pengesahan borang. Kami akan mengesahkan nama pengguna dan kata laluan semasa menghantar borang. Jika pengesahan berjaya, pengguna akan dibenarkan untuk log masuk jika pengesahan gagal, mesej ralat akan dipaparkan.

Berikut ialah contoh asas jQuery:

$(document).ready(function() {
  $("#login-form").submit(function(event) {
    event.preventDefault(); // 阻止表单提交

    var username = $("#username").val();
    var password = $("#password").val();

    // 对用户名和密码进行验证
    if (username === "" || password === "") {
      $("#login-error").html("请填写用户名和密码");
    } else if (username !== "admin" || password !== "123456") {
      $("#login-error").html("用户名或密码不正确");
    } else {
      $("#login-error").html(""); // 清空错误消息
      // 登录成功之后的操作
    }
  });
});

Langkah 4: Paparkan mesej ralat

Untuk memaparkan mesej ralat, kita perlu tambah pada struktur HTML Tambah elemen untuk memaparkan mesej ralat.

<div id="login-error"></div>

Apabila borang diserahkan, kami mengemas kini elemen ini secara dinamik berdasarkan hasil pengesahan.

Contoh Kod Penuh

Berikut ialah contoh lengkap dengan semua kod HTML, CSS dan jQuery:

rreee

Conclusion

#🎜 🎜 #Dengan HTML, CSS dan jQuery, kami boleh membina pengesahan borang log masuk yang cantik dengan mudah. Apabila pengguna menyerahkan borang, kami menggunakan jQuery untuk mengesahkan input dan memaparkan mesej ralat berdasarkan hasil pengesahan. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci HTML, CSS dan jQuery: Bina pengesahan borang log masuk yang cantik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!