Dalam kod HTML ini, kami menentukan fail JavaScript bernama "register.js" untuk melaksanakan logik pendaftaran. Berikut ialah kod untuk fail JavaScript ini:

function doRegister() { // 获取用户输入的账号、密码和确认密码 var username = document.getElementById("username").value; var password = document.getElementById("password").value; var confirmPassword = document.getElementById("confirmPassword").value; // 进行账号和密码的验证 if (username === "") { alert("Username cannot be empty!"); } else if (password === "" || confirmPassword === "") { alert("Password or confirm password cannot be empty!"); } else if (password !== confirmPassword) { alert("Password and confirm password do not match!"); } else { alert("Register success!"); } } // 监听注册按钮的点击事件 document.getElementById("registerBtn").addEventListener("click", doRegister);

Dalam kod ini, kami telah mencipta fungsi bernamadoRegister()untuk mengendalikan logik pendaftaran pengguna. Begitu juga, kami mendapatkan nombor akaun, kata laluan dan kata laluan pengesahan yang dimasukkan oleh pengguna, dan mengesahkan maklumat ini. Dalam contoh ini, kami melakukan tiga pengesahan: nama pengguna tidak boleh kosong, kata laluan dan kata laluan pengesahan tidak boleh kosong, dan kata laluan dan kata laluan pengesahan mesti konsisten. Apabila ketiga-tiga syarat ini dipenuhi, kotak gesaan "Daftar kejayaan!"

Akhir sekali, kami menambah acara mendengar untuk butang pendaftaran melalui fungsiaddEventListener()dalam kod JavaScript Apabila butang itu diklik, fungsidoRegister()akan dipanggil untuk memproses input pengguna.

4. Laksanakan penyimpanan data setempat

Kod di atas melengkapkan pelaksanaan fungsi log masuk/pendaftaran asas, tetapi kotak input akan dikosongkan setiap kali ia dimuat semula atau data dimasukkan dengan salah , mengakibatkan pengalaman pengguna yang buruk Oleh itu kita perlu menyimpan data secara setempat, iaitu, melaksanakan storan tempatan. Kami menggunakan localStorage untuk storan data, yang menggunakan pasangan nilai kunci untuk menyimpan data dan menyediakan setItem, getItem dan antara muka lain yang berkaitan untuk menyelesaikan kerja storan.

Berikut ialah contoh kod yang diubah suai:

// 登录逻辑 function doLogin() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; // 将数据存储到本地 window.localStorage.setItem("username", username); window.localStorage.setItem("password", password); if (username === "admin" && password === "123456") { alert("Login success!"); } else { alert("Incorrect username or password!"); } } // 监听登录按钮的点击事件 document.getElementById("loginBtn").addEventListener("click", doLogin); // 注册逻辑 function doRegister() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; var confirmPassword = document.getElementById("confirmPassword").value; if (username === "") { alert("Username cannot be empty!"); } else if (password === "" || confirmPassword === "") { alert("Password or confirm password cannot be empty!"); } else if (password !== confirmPassword) { alert("Password and confirm password do not match!"); } else { // 将数据存储到本地 window.localStorage.setItem("username", username); window.localStorage.setItem("password", password); alert("Register success!"); } } // 监听注册按钮的点击事件 document.getElementById("registerBtn").addEventListener("click", doRegister); // 初始化登录页面的数据 function initLoginPage() { var username = window.localStorage.getItem("username"); var password = window.localStorage.getItem("password"); if (username && password) { document.getElementById("username").value = username; document.getElementById("password").value = password; } } // 初始化注册页面的数据 function initRegisterPage() { var username = window.localStorage.getItem("username"); if (username) { document.getElementById("username").value = username; } } // 判断当前页面是登录页面还是注册页面 if (document.title === "Login Page") { initLoginPage(); } else if (document.title === "Register Page") { initRegisterPage(); }

Dalam kod ini, kami menggunakan localStorage untuk melaksanakan penyimpanan data setempat. Apabila pengguna berjaya log masuk atau mendaftar, kami menyimpan nama pengguna dan kata laluan dalam localStorage. Apabila halaman dimuat semula, kami mendapat nama pengguna dan kata laluan daripada localStorage dan mengisinya dalam kotak input yang sepadan. Dengan cara ini, pengguna boleh mengekalkan data yang dimasukkan terakhir selepas memuat semula halaman, meningkatkan kemudahan interaksi halaman.

Ringkasan

Di atas adalah kaedah dan langkah untuk JavaScript melaksanakan fungsi log masuk dan pendaftaran tapak web dan aplikasi. Melalui contoh kod ini, kami mempelajari cara menggunakan JavaScript untuk melaksanakan fungsi asas tapak web dan aplikasi, dan untuk melaksanakan penyimpanan data setempat untuk meningkatkan kemudahan interaksi halaman. Sudah tentu, contoh kod ini hanya menunjukkan pelaksanaan fungsi log masuk/pendaftaran yang paling asas, dan pembangun boleh melaksanakan kerja pembangunan yang lebih kompleks berdasarkan keperluan sebenar.

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