输入时实时校验MongoDB中邮箱是否存在的功能实现及报错排查

问题原因 #

• 你编写的emailCheck控制器不符合Express路由处理函数的规范，路由处理函数的入参应该是(req, res, next)，不能直接接收email参数，需要从req.body中取前端传递的邮箱参数
• 控制器没有用try/catch捕获数据库查询的异常，异步操作报错后没有对应的错误处理，就触发了未处理的Promise rejection报错
• 当前控制器只是return了0/1，没有通过res.json()把结果返回给前端，前端请求拿不到响应自然报错

修复方案 #

1. 修正emailCheck控制器代码 #

module.exports.emailCheck = async (req, res) => {
  try {
    const { email } = req.body
    const check = await InscritModel.findOne({ email: email })
    // 直接返回布尔值给前端，方便判断
    res.json(!!check)
  } catch (err) {
    // 捕获异常，返回错误响应
    console.error('邮箱校验出错:', err)
    res.status(500).json(false)
  }
}

2. 可选优化：拦截表单默认提交行为 #

你原来的注册接口校验到邮箱存在会渲染页面清空表单，可以额外修改注册逻辑，改成前端ajax提交表单，校验通过再跳转，避免触发表单默认提交刷新页面的行为：

// 注册表单提交事件拦截
$('#signUpForm').submit(function(e) {
  e.preventDefault() // 阻止默认提交刷新页面
  // 先校验邮箱是否可用
  if ($('#divOutput').text() === ' already in use') {
    alert('邮箱已存在，请更换')
    return
  }
  // 这里加你已经实现的密码一致性校验逻辑
  // 所有校验通过后，可以用ajax提交注册数据，成功后再跳转到对应页面，全程不刷新页面
})

3. 额外体验优化 #

• 可以把keyup事件换成input事件，覆盖粘贴、浏览器自动填充等场景的输入变化，覆盖场景比keyup更全
• 加防抖逻辑，避免用户连续输入时频繁发请求给服务器，比如设置300ms延迟，用户停止输入300ms后再发校验请求，降低服务器压力

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