如何在EJS表单提交成功后显示提示信息？

步骤1：后端路由处理（以Express为例） #

在处理注册请求的/registeruserdetails路由中，完成注册逻辑后给EJS模板传递success变量：

// Express POST路由示例
app.post('/registeruserdetails', async (req, res) => {
  try {
    // 检查邮箱是否已存在
    const existingUser = await User.findOne({ email: req.body.email });
    if (existingUser) {
      // 邮箱重复，返回页面并传递repeatemail变量
      return res.render('你的注册模板文件名', { repeatemail: true });
    }
    // 执行注册逻辑（保存用户到数据库等）
    await new User(req.body).save();
    // 注册成功，传递success变量给模板
    res.render('你的注册模板文件名', { success: true });
  } catch (err) {
    console.error(err);
    res.status(500).send('服务器错误');
  }
});

步骤2：修改EJS模板添加成功提示 #

在现有表单的提示区域，新增成功提示的条件渲染区块：

<form name="myform" id="myform" class="form-group" action="/registeruserdetails" method="post">
    <h2 style="text-align:center; font-weight:bold; font-size:25px">User Registration Form</h2>
    <div class="row ">
        <div class="col-md-12">
                <% if (repeatemail) { %>
                    <div class="toast show" id="myToast">
                        <div class="toast-body text-danger">
                            A User with this email already exists
                        </div>
                    </div>
                <% } %>
                <!-- 新增注册成功提示 -->
                <% if (success) { %>
                    <div class="toast show" id="successToast">
                        <div class="toast-body text-success">
                            注册成功！
                        </div>
                    </div>
                <% } %>
        </div>
        <!-- 原表单字段保持不变 -->
        <div class="col-md-6">
            <label for="inputname">First name </label>
            <input type="text" class="form-control" name="firstname" placeholder="First Name" required
            pattern="[a-zA-Z][a-zA-Z ]+[a-zA-Z]$" title="Name should only contain Letters e.g. John">
        </div>
        <!-- 剩余表单代码... -->
</form>

可选：添加自动隐藏提示的JS代码

<script>
// 成功提示3秒后自动隐藏
if (document.getElementById('successToast')) {
    setTimeout(() => {
        document.getElementById('successToast').classList.remove('show');
    }, 3000);
}
// 重复邮箱提示同理
if (document.getElementById('myToast')) {
    setTimeout(() => {
        document.getElementById('myToast').classList.remove('show');
    }, 3000);
}
</script>

常见问题说明 #

之前if-else失效大概率是因为后端未正确传递success变量，或者模板中条件判断的位置错误。确保注册成功时，后端确实将success: true作为第二个参数传给res.render。

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