js页面登陆注册代码怎么写

JS页面登陆注册代码怎么写

要实现JS页面的登陆注册功能，主要步骤包括：设计HTML结构、编写CSS样式、实现前端JS逻辑、与后端API对接、增加表单验证等。其中，表单验证是实现用户注册和登陆功能中的关键步骤之一，它能确保用户输入的数据格式正确，避免无效或恶意数据提交。下面我们将详细阐述如何编写一个完整的JS页面登陆注册代码。

一、设计HTML结构

HTML是网页的基础，通过合理的HTML结构，我们可以有效地组织页面的登陆和注册表单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login & Register</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="form-container sign-up-container">
            <form id="registerForm">
                <h1>Create Account</h1>
                <input type="text" placeholder="Name" id="registerName" required>
                <input type="email" placeholder="Email" id="registerEmail" required>
                <input type="password" placeholder="Password" id="registerPassword" required>
                <button type="submit">Sign Up</button>
            </form>
        </div>
        <div class="form-container sign-in-container">
            <form id="loginForm">
                <h1>Sign in</h1>
                <input type="email" placeholder="Email" id="loginEmail" required>
                <input type="password" placeholder="Password" id="loginPassword" required>
                <button type="submit">Sign In</button>
            </form>
        </div>
        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-panel overlay-left">
                    <button class="ghost" id="signIn">Sign In</button>
                </div>
                <div class="overlay-panel overlay-right">
                    <button class="ghost" id="signUp">Sign Up</button>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、编写CSS样式

使用CSS来美化我们的表单，使其用户体验更佳。

/* styles.css */
body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
.container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.1), 0 5px 5px 0 rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
    width: 800px;
    max-width: 100%;
    min-height: 480px;
}
.form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.6s ease-in-out;
}
.sign-in-container {
    left: 0;
    width: 50%;
    z-index: 2;
}
.sign-up-container {
    left: 0;
    width: 50%;
    opacity: 0;
    z-index: 1;
}
.container.right-panel-active .sign-in-container {
    transform: translateX(100%);
}
.container.right-panel-active .sign-up-container {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    animation: show 0.6s;
}
@keyframes show {
    0%, 49.99% {
        opacity: 0;
        z-index: 1;
    }
    50%, 100% {
        opacity: 1;
        z-index: 5;
    }
}
.overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}
.container.right-panel-active .overlay-container{
    transform: translateX(-100%);
}
.overlay {
    background: #FF416C;
    background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
    background: linear-gradient(to right, #FF4B2B, #FF416C);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    color: #FFFFFF;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {
    transform: translateX(50%);
}
.overlay-panel {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}
.overlay-left {
    transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
    transform: translateX(0);
}
.overlay-right {
    right: 0;
    transform: translateX(0);
}
.container.right-panel-active .overlay-right {
    transform: translateX(20%);
}
.ghost {
    background-color: transparent;
    border-color: #FFFFFF;
    border-width: 2px;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    padding: 12px 45px;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
}
button.ghost:hover {
    background-color: #FFFFFF;
    color: #FF416C;
}

三、实现前端JS逻辑

使用JavaScript来实现表单的切换和提交逻辑。

// script.js
const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.querySelector('.container');
signUpButton.addEventListener('click', () => {
    container.classList.add('right-panel-active');
});
signInButton.addEventListener('click', () => {
    container.classList.remove('right-panel-active');
});
const registerForm = document.getElementById('registerForm');
const loginForm = document.getElementById('loginForm');
registerForm.addEventListener('submit', async (event) => {
    event.preventDefault();
    const name = document.getElementById('registerName').value;
    const email = document.getElementById('registerEmail').value;
    const password = document.getElementById('registerPassword').value;
    // Perform form validation
    if (name === "" || email === "" || password === "") {
        alert("All fields are required.");
        return;
    }
    // Send request to server
    try {
        const response = await fetch('https://your-backend-api/register', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ name, email, password })
        });
        const data = await response.json();
        if (data.success) {
            alert("Registration successful!");
        } else {
            alert(data.message);
        }
    } catch (error) {
        console.error("Error:", error);
    }
});
loginForm.addEventListener('submit', async (event) => {
    event.preventDefault();
    const email = document.getElementById('loginEmail').value;
    const password = document.getElementById('loginPassword').value;
    // Perform form validation
    if (email === "" || password === "") {
        alert("All fields are required.");
        return;
    }
    // Send request to server
    try {
        const response = await fetch('https://your-backend-api/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ email, password })
        });
        const data = await response.json();
        if (data.success) {
            alert("Login successful!");
        } else {
            alert(data.message);
        }
    } catch (error) {
        console.error("Error:", error);
    }
});

四、与后端API对接

为了实现完整的登陆注册功能，我们需要与后端API进行对接。这里，我们假设后端API的地址为 https://your-backend-api，并且提供了 register 和 login 两个端点来处理注册和登陆请求。

注册API
- URL: https://your-backend-api/register
- 方法: POST
- 参数: name, email, password
- 返回值: success (boolean), message (string)
登陆API
- URL: https://your-backend-api/login
- 方法: POST
- 参数: email, password
- 返回值: success (boolean), message (string)

五、增加表单验证

表单验证是确保用户输入数据有效的重要步骤。我们可以在前端使用JavaScript进行简单的验证，如检查字段是否为空、邮箱格式是否正确等。

1. 验证姓名

function validateName(name) {
    return name.trim() !== '';
}

2. 验证邮箱

function validateEmail(email) {
    const re = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$/;
    return re.test(email);
}

3. 验证密码

function validatePassword(password) {
    return password.length >= 6;
}

在提交表单之前，我们可以调用这些验证函数来确保用户输入的数据是有效的。

registerForm.addEventListener('submit', async (event) => {
    event.preventDefault();
    const name = document.getElementById('registerName').value;
    const email = document.getElementById('registerEmail').value;
    const password = document.getElementById('registerPassword').value;
    // Perform form validation
    if (!validateName(name)) {
        alert("Name is required.");
        return;
    }
    if (!validateEmail(email)) {
        alert("Invalid email format.");
        return;
    }
    if (!validatePassword(password)) {
        alert("Password must be at least 6 characters.");
        return;
    }
    // Send request to server
    try {
        const response = await fetch('https://your-backend-api/register', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ name, email, password })
        });
        const data = await response.json();
        if (data.success) {
            alert("Registration successful!");
        } else {
            alert(data.message);
        }
    } catch (error) {
        console.error("Error:", error);
    }
});

通过以上步骤，我们已经完成了一个完整的JS页面登陆注册代码实现。为了进一步提升项目管理效率，可以考虑使用研发项目管理系统PingCode或者通用项目协作软件Worktile来协同开发和管理项目进度。