JavaScript用纯JS和HTML搭建一个带登录和注册的动态页面-----JavaScript




<!DOCTYPE html>
<html>
<head>
    <title>Login and Registration Page</title>
    <style>
        body { font-family: Arial, sans-serif; }
        form { display: block; margin: 0 auto; width: 300px; }
        input[type=text], input[type=password] { width: 200px; }
        .error { color: #FF0000; }
    </style>
</head>
<body>
 
<h2>Login or Register</h2>
 
<form id="login-form">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username"><br><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br><br>
    <input type="submit" value="Login">
</form>
 
<form id="register-form">
    <label for="new-username">Username:</label>
    <input type="text" id="new-username" name="new-username"><br><br>
    <label for="new-password">Password:</label>
    <input type="password" id="new-password" name="new-password"><br><br>
    <input type="submit" value="Register">
</form>
 
<script>
// 假设这是你的登录验证逻辑
function login(username, password) {
    // 这里应该是与后端服务的交互
    if(username === 'user' && password === 'pass') {
        alert('Login successful!');
        // 登录成功后的操作，比如跳转页面
    } else {
        alert('Login failed. Username and/or password incorrect.');
    }
}
 
// 假设这是你的注册逻辑
function register(username, password) {
    // 这里应该是与后端服务的交互
    if(username && password) {
        alert('Registration successful!');
        // 注册成功后的操作，比如清空表单并切换到登录表单
    } else {
        alert('Registration failed. Please fill in all fields.');
    }
}
 
// 添加事件监听到表单提交
document.getElementById('login-form').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;
    login(username, password);
});
 
document.getElementById('register-form').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    var username = document.getElementById('new-username').value;
    var password = document.getElementById('new-password').value;
    register(username, password);
});
</script>
 
</body>
</html>

这个简单的例子展示了如何使用JavaScript和HTML创建一个带有登录和注册表单的页面。在实际应用中，登录和注册逻辑需要与后端服务交互，并且需要更复杂的错误处理和用户验证。

JavaScript用纯JS和HTML搭建一个带登录和注册的动态页面-----JavaScript

评论已关闭

推荐阅读