Node.js+Express+Pug环境下调试登录函数控制台无输出问题排查

问题背景 #

使用Node.js搭配Express框架及Pug模板开发时，登录功能出现异常：已确认表单元素loginForm存在，但提交事件监听器内部的代码完全不执行，控制台无任何输出（包括固定文本）。

相关代码片段 #

前端JS代码：

const loginForm = document.querySelector('.form--login');

if (loginForm)
  loginForm.addEventListener('submit', function (e) {
    e.preventDefault();
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    console.log(email, password);
    login(email, password);
  });

Pug模板代码：

extends base

block content
    main.main
    .login-form
        h2.heading-secondary.ma-bt-lg Log into your account
        form.form.form--login
        .form__group
            label.form__label(for='email') Email address
            input#email.form__input(type='email', placeholder='you@example.com', required)
        .form__group.ma-bt-md
            label.form__label(for='password') Password
            input#password.form__input(type='password', placeholder='••••••••', required, minlength='8')
        .form__group
           a.buttonS.primaryD1.fontStd(href='/login')  Login 

问题原因 #

1. Pug缩进错误：form.form.form--login标签后没有缩进，导致所有表单控件（输入框、登录按钮）都成为了form的同级元素，而非子元素。浏览器渲染后form标签是空的，无法关联任何输入内容。
2. 登录按钮类型错误：使用了<a>标签作为登录按钮，点击时只会触发页面跳转，不会触发form的submit事件。

修复方案 #

调整Pug代码的缩进结构，并将登录按钮替换为submit类型的按钮：

extends base

block content
    main.main
        .login-form
            h2.heading-secondary.ma-bt-lg Log into your account
            form.form.form--login
                .form__group
                    label.form__label(for='email') Email address
                    input#email.form__input(type='email', placeholder='you@example.com', required)
                .form__group.ma-bt-md
                    label.form__label(for='password') Password
                    input#password.form__input(type='password', placeholder='••••••••', required, minlength='8')
                .form__group
                    button.buttonS.primaryD1.fontStd(type='submit') Login 

修复说明 #

• 缩进修正后，所有表单控件都被包含在form标签内部，表单可以正确获取输入值。
• 使用<button type="submit">替代<a>标签，点击时会触发form的submit事件，进而执行监听器内的逻辑。

内容的提问来源于stack exchange，提问作者Leon