无需前端框架如何从Express获取响应并在HTML表单页展示校验提示

解决方案 #

你可以选择以下两种无需引入前端框架的方案实现需求：

方案1：服务端渲染错误提示（完全无需编写JS） #

这种方案表单提交后会重新渲染当前页面，不会跳转至其他页面：

1. 修改表单页的Express渲染逻辑，支持接收错误参数：

// 渲染表单页的路由
app.get('/login', (req, res) => {
  // 接收校验不通过时回传的错误信息，无错误则为空
  res.render('login', { error: req.query.error || '' })
})

2. 调整HTML表单页代码，嵌入错误提示逻辑（以下用EJS模板举例，可适配你正在使用的任意模板引擎）：

<!-- 校验不通过时自动弹出提示 -->
<% if (error) { %>
<script>alert('<%= error %>')</script>
<% } %>

<form action="/IsSign" method="POST">
  <input type="text" name="name">
  <button type="submit">sign in</button>
</form>

3. 编写/IsSign接口的业务逻辑：

app.post('/IsSign', async (req, res) => {
  const { name } = req.body
  // 此处替换为你自己的数据库查询逻辑
  const user = await User.findOne({ name })
  if (!user) {
    // 校验不通过，回跳表单页并携带错误参数
    return res.redirect('/login?error=用户未注册')
  }
  // 校验通过，跳转至登录后页面
  res.redirect('/home')
})

方案2：原生JS提交表单（无刷新体验更好） #

仅用浏览器自带的Fetch API即可实现，不需要引入任何框架：

1. 调整HTML表单代码，增加提交事件监听：

<form id="loginForm">
  <input type="text" name="name">
  <button type="submit">sign in</button>
</form>

<script>
document.querySelector('#loginForm').addEventListener('submit', async function(e) {
  // 阻止表单默认提交跳转的行为
  e.preventDefault()
  // 自动收集表单数据
  const formData = new FormData(this)
  try {
    const res = await fetch('/IsSign', {
      method: 'POST',
      body: formData
    })
    const result = await res.json()
    if (!result.success) {
      // 校验不通过直接弹出提示
      alert(result.msg)
      return
    }
    // 校验通过手动跳转页面
    window.location.href = '/home'
  } catch (err) {
    alert('请求出错，请重试')
  }
})
</script>

2. 修改/IsSign接口返回JSON格式数据：

app.post('/IsSign', async (req, res) => {
  const { name } = req.body
  // 此处替换为你自己的数据库查询逻辑
  const user = await User.findOne({ name })
  if (!user) {
    return res.json({
      success: false,
      msg: '用户未注册'
    })
  }
  res.json({
    success: true
  })
})

内容的提问来源于stack exchange，提问作者Itai Ben-Avraham