前后端登录注册界面实现详解-CSDN博客

本文详述了使用node.js实现前后端登录注册界面的方法，包括前端HTML、JS（jQuery）、AJAX交互，以及后端数据库操作和路由设置。讨论了注册时邮箱格式验证、密码一致性检查和邮箱唯一性验证，登录时的邮箱、密码验证，以及登录后的cookie管理和首页路由。还简要介绍了cookie的工作原理和作用域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇博客讲解如何实现前后端的简单登录注册界面，后端代码由node.js实现，主要阐述登录注册时网页工作原理。感兴趣的同学可以参考一下。

注册界面

功能：

判断用户是否输入邮箱，密码，验证密码(前端判断)
判断用户的邮箱格式是否正确(后端判断)
判断输入的密码和验证密码是否一致(前端判断)
判断注册的邮箱是否唯一(后端判断)

1.html部分：

<div class="form-wrapper">
    <h1>注册</h1>
    <form id="RegisterForm" >
        <div class="row">
            <lable>邮箱</lable>
            <input type="text" name="email">
            <span class="error"></span>
        </div>
        <div class="row">
            <lable>密码</lable>
            <input type="password" name="password">
            <span class="error"></span>
        </div>
          <div class="row">
              <lable>确认密码</lable>
              <input type="password" name="password_confirm">
              <span class="error"></span>
          </div>
            <div class="row">
                <input type="submit">
            </div>

    </form>
</div>

2.js部分(由jquery实现)：

监听表单的submit事件，将用户输入的信息存储到hash表中，如果用户输入不合法则出现错误提示信息

$('#RegisterForm').on('submit',(e) => {
    e.preventDefault();
    let hash = {};
    let arg = ['email','password','password_confirm'];
    arg.forEach((name) => {
        let value = $('#RegisterForm').find(`[name= ${name}]`).val();
        hash[name] = value;
    })
    $('#RegisterForm').find('.error').each((index,span) => {
        $(span).text(''); //初始的错误提示为空
    })
    if(hash['email'] === ''){
        $('#RegisterForm').find('[name = "email"]').siblings('.error').text('请输入邮箱');
        return
    }
     if(hash['password'] === ''){
        $('#RegisterForm').find('[name = "password"]').siblings('.error').text('请输入密码');
        return
    }
    if(hash['password_confirm'] ===