Express.js如何实现服务端注册表单必填字段校验

核心逻辑分三步：配置请求体解析、编写服务端校验规则、修改EJS模板展示自定义错误提示。

• 第一步：配置Express请求体解析中间件
  要读取表单POST提交的字段，必须先在路由定义前加express.urlencoded中间件，否则req.body会是undefined，无法拿到表单数据：

  const express = require('express')
  const app = express()
  // 配置表单请求体解析，必须放在所有路由定义之前
  app.use(express.urlencoded({ extended: true }))
  app.set('view engine', 'ejs') // 确认已开启EJS模板引擎配置
  

• 第二步：编写POST /signup路由的校验逻辑
  不需要单独写/error路由，直接在处理注册提交的接口里做字段校验：对每个字段先去除首尾空格再判断是否为空，校验不通过就直接返回注册页+对应错误提示，校验通过再走后续账号创建逻辑，从根源上绕过前端校验的非法请求也会被拦截：

  // 注册页GET路由，首次进入页面无错误信息
  app.get('/signup', (req, res) => {
    res.render('signup', { error: undefined })
  })
  
  // 注册提交POST路由
  app.post('/signup', (req, res) => {
    // 提取表单字段，统一去除首尾空格，兼容字段未传的异常场景
    const name = (req.body.name || '').trim()
    const usr = (req.body.usr || '').trim()
    const psd = (req.body.psd || '').trim()
  
    // 按顺序做非空校验，命中任意规则就返回对应提示
    if (!name) {
      return res.render('signup', { error: '请输入你的姓名' })
    }
    if (!usr) {
      return res.render('signup', { error: '请输入用户名' })
    }
    if (!psd) {
      return res.render('signup', { error: '请输入密码' })
    }
  
    // 所有字段校验通过，再执行后续密码加密、账号入库、注册成功跳转等业务逻辑
    // ...... 你的原有注册业务代码
    res.send('注册成功')
  })
  

• 第三步：修改signup.ejs模板，展示自定义错误提示
  可以移除input上的原生required属性，避免弹出浏览器默认的提示框；在表单顶部加错误信息渲染逻辑，还可以自定义错误提示的样式匹配网站设计：

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MVC | Signup</title>
    <style>
      /* 可自定义错误提示样式，匹配站点UI */
      .error-tip {
        color: #f53f3f;
        padding: 8px 12px;
        background: #fff1f0;
        border-radius: 4px;
        margin-bottom: 12px;
      }
      input {
        display: block;
        margin: 8px 0;
        padding: 6px 8px;
      }
    </style>
  </head>
  <body>
      <form action="/signup" method="post" class="w-1/2 flex flex-col" target="nothing">
        <h1 class="text-xl text-center mb-5">Sign up for post-it</h1>
        <!-- 错误提示渲染逻辑 -->
        <% if (typeof error !== 'undefined' && error) { %>
          <div class="error-tip"><%= error %></div>
        <% } %>
        <input type="text" name="name" placeholder="Your name">
        <input type="text" name="usr" placeholder="Username">
        <input type="password" name="psd" placeholder="Password">
        <button type="submit">Sign up for post-it</button>
      </form>
      <iframe name="nothing" style="display: none"></iframe>
  </body>
  </html>
  

补充说明：如果需要更流畅的交互，可以自行编写JS监听表单submit事件做前端实时校验，但服务端校验必须保留——所有前端校验都可以通过抓包、修改页面源码、构造请求等方式绕过，服务端校验才是数据安全的核心防线。

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