登录并注册链接在一起

Question

我尝试实现一个登录和注册系统，其中两个表单链接在一起，允许用户轻松地在它们之间切换。我还设置了一个模拟 API 来模拟后端交互，但我面临着几个挑战：

1. 表单切换：我无法在登录表单和注册表单之间顺利切换。 UI 未按预期更新，有时会丢失用户的输入或导致意外行为。
2. 模拟 API 处理：我设置了一个模拟 API 来处理登录和注册请求，但我不确定是否正确模拟了 API 响应。我面临着返回成功或错误响应的问题，并且我不确定如何在前端正确处理这些响应。
3. 身份验证状态：事实证明，管理用户的身份验证状态很困难。我需要确保一旦用户成功登录或注册，他们就会被适当地重定向，但我当前的实现不能很好地处理这个问题。
4. 验证和错误处理：为登录表单和注册表单实施表单验证一直具有挑战性。当出现问题时，我还需要显示相关的错误消息，例如输入无效或登录尝试失败，但我当前的错误处理要么不完整，要么无法按预期工作。

我正在寻找有关如何有效解决这些问题的详细示例或指南。

Answer 1

试试这个！

报名：

document.getElementById('registerForm').addEventListener('提交', function(event) { event.preventDefault();

let name = document.getElementById('name').value;
let email = document.getElementById('email').value;
let password = document.getElementById('password').value;
let messageElement = document.getElementById('message');

if (name.length <= 5) {
    messageElement.textContent = 'Name must include more than 5 characters.';
    return;
}

if (password.length <= 8) {
    messageElement.textContent = 'Password must include more than 8 characters.';
    return;
}

fetch('https://66e7e68bb17821a9d9da6e50.mockapi.io/login', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name, email, password })
})
.then(response => response.json())
.then(data => {
    messageElement.textContent = 'Redirecting to login...';
    setTimeout(() => {
        window.location.href = 'login.html';
    }, 2000);
})

});

登录：

document.getElementById('loginForm').addEventListener('提交', function(event) { event.preventDefault();

let email = document.getElementById('email').value;
let password = document.getElementById('password').value;
let messageElement = document.getElementById('message');

fetch('https://66e7e68bb17821a9d9da6e50.mockapi.io/login')
.then(response => response.json())
.then(users => {
    let user = users.find(user => user.email === email && user.password === password);

    if (user) {
        sessionStorage.setItem('userId', user.id);
        sessionStorage.setItem('userName', user.name);
        sessionStorage.setItem('userEmail', user.email);
        window.location.href = 'home.html'; 
    } else {
        messageElement.textContent = 'Wrong email or password.';
    }
})
.catch(error => {
    console.error('Error fetching user data:', error);
    messageElement.textContent = 'An error occurred. Please try again later.';
});

});