登录表单无法提交及Express Router报错问题求助

一、后端 TypeError: Router.use() requires a middleware function but got a Object 错误修复 #

这个错误的核心原因是路由模块导出的不是有效的express.Router实例，或者主文件引入路由时方式错误。

常见错误场景及修复： #

1. 路由模块导出错误
   如果你的loginServer.js是这样导出的：

   // 错误写法
   const router = express.Router();
   // ...登录逻辑
   module.exports = { router }; // 包裹在对象里导出
   

   改成直接导出Router实例：

   // 正确写法
   const express = require('express');
   const router = express.Router();
   
   router.post('/', (req, res) => {
     // 处理登录请求的逻辑
     const { username, password } = req.body;
     // 验证逻辑...
     res.send('登录成功');
   });
   
   module.exports = router;
   

2. 主文件(index.js)引入路由错误
   确保在index.js里正确引入并挂载路由，同时必须添加表单数据解析中间件（否则无法获取POST请求的表单数据）：

   const express = require('express');
   const app = express();
   // 解析application/x-www-form-urlencoded格式的表单数据
   app.use(express.urlencoded({ extended: true }));
   // 挂载登录路由
   const loginRouter = require('./loginServer');
   app.use('/login', loginRouter);
   
   app.listen(3000, () => {
     console.log('服务运行在 http://localhost:3000');
   });
   

二、前端表单无提交动作修复 #

点击登录按钮无反应，通常是以下几种原因：

1. 登录按钮类型错误
   确保按钮是type="submit"类型（默认不写也是submit，但显式声明更稳妥），如果写成type="button"，点击只会触发JS事件，不会提交表单：

   <!-- 正确写法 -->
   <form action="./login" method="post">
     <input type="text" name="username" required>
     <input type="password" name="password" required>
     <button type="submit">登录</button>
   </form>
   

2. 存在阻止默认提交的JS代码
   检查页面内是否有监听表单submit事件的代码，若调用了event.preventDefault()且没有手动触发提交，会导致表单无法提交：

   // 如果有这类代码，要么删除preventDefault，要么手动提交表单
   document.querySelector('form').addEventListener('submit', (e) => {
     e.preventDefault(); // 这行代码会阻止默认提交
     // 如果需要保留验证逻辑，验证通过后手动提交
     e.target.submit();
   });
   

3. 表单路径不匹配
   确认后端服务的运行地址，比如服务在http://localhost:3000，那么表单的action="./login"对应http://localhost:3000/login，要和后端挂载的路由路径完全匹配。

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