Rumah > Artikel > hujung hadapan web > JavaScript melaksanakan pendaftaran log masuk web

JavaScript melaksanakan pendaftaran log masuk web

WBOYasal: 2023-05-16 11:14:373207semak imbas

Dengan perkembangan Internet, semakin banyak laman web dan aplikasi memerlukan pengguna mendaftar dan log masuk untuk menggunakan pelbagai fungsi. Melaksanakan log masuk dan pendaftaran untuk tapak web dan aplikasi biasanya memerlukan penggunaan teknologi back-end, tetapi pelaksanaannya menyusahkan dan memerlukan kitaran pembangunan yang panjang. Pada masa yang sama, pembangun bahagian hadapan juga boleh menggunakan teknologi JavaScript untuk melaksanakan fungsi log masuk dan pendaftaran, memberikan pengguna pengalaman yang lebih mudah dan kelajuan pembangunan yang lebih pantas.

Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi log masuk dan pendaftaran tapak web dan aplikasi asas.

1. Persediaan asas bahagian hadapan

Sebelum mula melaksanakan fungsi log masuk dan pendaftaran, anda perlu menyediakan beberapa asas teknikal bahagian hadapan asas:

Bahasa HTML: asas halaman web Sistem, yang menentukan susun atur dan kandungan elemen dalam halaman web.
Gaya CSS: Sediakan sokongan untuk pengindahan halaman web dan tentukan warna, fon, saiz dan gaya elemen lain dalam halaman web.
Bahasa JavaScript: Menyediakan fungsi interaktif dinamik untuk halaman web dan aplikasi, dan melaksanakan fungsi seperti log masuk, pendaftaran dan pengesahan.

2. Pelaksanaan log masuk laman web/aplikasi

Sebelum melaksanakan fungsi log masuk, adalah perlu untuk menentukan maklumat yang diperlukan untuk log masuk pengguna, termasuk nombor akaun dan kata laluan. Secara amnya, kita perlu menggunakan kotak input untuk mendapatkan maklumat ini, dan kemudian mengesahkan sama ada nombor akaun dan kata laluan yang dimasukkan oleh pengguna adalah sah.

Berikut ialah kod HTML halaman log masuk asas:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
</head>
<body>
    <h1>Login Page</h1>
    <form>
        <label for="username">Username:</label>
        <input type="text" id="username"><br>
        <label for="password">Password:</label>
        <input type="password" id="password"><br>
        <button type="submit" id="loginBtn">Login</button>
    </form>
    <script src="login.js"></script>
</body>
</html>

Dalam kod HTML ini, kami menggunakan tag ff9c23ada1bcecdd1a0fb5d5a0f18437 untuk mengandungi kotak input pengguna dan butang log masuk, dan 2e1cf0710519d5598b1f0f14c36ba674 penggunaan teg Untuk menerangkan tujuan kotak input, teg d5fd7aea971a85678ba271703566ebfd digunakan untuk mencipta kotak input dan teg bb9345e55eb71822850ff156dfde57c8 digunakan untuk mencipta butang log masuk.

Dalam kod HTML ini, kami menentukan fail JavaScript bernama "login.js" untuk melaksanakan logik log masuk. Berikut ialah kod untuk fail JavaScript ini:

function doLogin() {
    // 获取用户输入的账号和密码
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    // 进行账号和密码的验证
    if (username === "admin" && password === "123456") {
        alert("Login success!");
    } else {
        alert("Incorrect username or password!");
    }
}

// 监听登录按钮的点击事件
document.getElementById("loginBtn").addEventListener("click", doLogin);

Dalam kod ini, kami telah mencipta fungsi bernama doLogin() untuk mengendalikan logik log masuk pengguna. Mula-mula kami mendapatkan nombor akaun dan kata laluan yang dimasukkan oleh pengguna, dan kemudian mengesahkan maklumat ini. Dalam contoh ini, kami menggunakan nama pengguna dan kata laluan mudah untuk pengesahan. Apabila nama pengguna dan kata laluan dimasukkan dengan betul, kotak gesaan "Log masuk!", jika tidak, kotak gesaan atau kata laluan salah muncul.

Akhir sekali, kami menambah acara mendengar untuk butang log masuk melalui fungsi addEventListener() dalam kod JavaScript Apabila butang diklik, fungsi doLogin() akan dipanggil untuk memproses input pengguna.

3. Pelaksanaan pendaftaran laman web/aplikasi

Sama seperti pelaksanaan fungsi log masuk, kita juga perlu terlebih dahulu menentukan maklumat yang diperlukan untuk pendaftaran pengguna, termasuk nombor akaun, kata laluan dan kata laluan pengesahan. Di sini, kami perlu menambah pengesahan untuk medan "Sahkan Kata Laluan". Berikut ialah kod HTML halaman pendaftaran asas:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Register Page</title>
</head>
<body>
    <h1>Register Page</h1>
    <form>
        <label for="username">Username:</label>
        <input type="text" id="username"><br>
        <label for="password">Password:</label>
        <input type="password" id="password"><br>
        <label for="confirmPassword">Confirm Password:</label>
        <input type="password" id="confirmPassword"><br>
        <button type="submit" id="registerBtn">Register</button>
    </form>
    <script src="register.js"></script>
</body>
</html>

Begitu juga, dalam kod HTML ini, kami menggunakan teg ff9c23ada1bcecdd1a0fb5d5a0f18437 untuk mengandungi kotak input pengguna dan butang pendaftaran, dan teg 2e1cf0710519d5598b1f0f14c36ba674 ialah digunakan untuk menerangkan kotak input Teg d5fd7aea971a85678ba271703566ebfd digunakan untuk mencipta kotak input, dan teg bb9345e55eb71822850ff156dfde57c8 digunakan untuk membuat butang pendaftaran.

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 bernama doRegister() 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 fungsi addEventListener() dalam kod JavaScript Apabila butang itu diklik, fungsi doRegister() 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!

JavaScript css html register 接口 JS 事件 input

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Android mengubah suai javascriptArtikel seterusnya：Android mengubah suai javascript

Artikel berkaitan

Lihat lagi