提交表单时显示元素：Nodemailer提交成功后仅展示提示的问题

看起来你已经搞定了邮件发送的核心功能，现在就差让提示框只在提交成功后出现对吧？问题出在你的<p>标签不管有没有msg值都会被渲染出来，哪怕msg是空的，CSS样式也会作用在它上面，所以页面一加载就会看到一个带着样式的空白提示块。

这里有几个简单的解决方案，按推荐程度排序：

1. 模板条件渲染（最可靠） #

直接在模板里判断，只有当msg存在且不为空时，才渲染这个提示标签。假设你用的是Express常用的EJS模板（从res.render的用法来看大概率是），修改你的HTML代码：

<% if (msg) { %>
  <p class="full sent-message">{{{msg}}}</p>
<% } %>

同时确保初始加载contact页面时，后端不要传递msg变量：

// 初始访问contact页面的路由
app.get('/contact', (req, res) => {
  res.render('contact'); // 这里不传msg，模板就不会渲染提示框
});

// 表单提交处理路由
app.post('/contact', (req, res) => {
  // ... 你的表单数据处理、邮件发送逻辑
  transporter.sendMail(info, (error, info) => { 
    if(error){ 
      return console.log(error) 
    } 
    console.log('Message sent %s', info.messageId) 
    res.render('contact', {msg: "Message sent"}) // 只有提交成功才传msg
  });
});

这样一来，页面刚加载时提示框根本不会出现在DOM里，只有提交成功后才会被渲染出来，完美解决提前显示的问题。

2. CSS默认隐藏+内容非空时显示 #

如果你不想修改模板逻辑，可以通过CSS控制：默认隐藏提示框，当它的内容不为空时再显示。修改你的CSS：

.sent-message{ 
  background-color: rgba(0, 130, 0, 0.23); 
  color: #005000; 
  padding: 1em; 
  border-radius: 5px; 
  text-align: center; 
  display: none; /* 默认隐藏 */
}

/* 当标签内容不为空时显示 */
.sent-message:not(:empty) {
  display: block;
}

这种方法不需要改后端路由，只要保证初始渲染时msg是未定义或者空字符串就行。不过如果后端不小心传了空的msg（比如{msg: ""}），这个方法就会失效，所以不如第一种可靠。

3. 动态添加提示框（前端JS方案） #

如果你的表单是通过AJAX提交的（而不是刷新页面），可以在提交成功后用JS动态创建并插入提示框，而不是一开始就写在HTML里。比如：

// 假设你用AJAX提交表单
document.querySelector('form').addEventListener('submit', async (e) => {
  e.preventDefault();
  // ... 收集表单数据、发送请求
  const response = await fetch('/contact', { method: 'POST', body: formData });
  if (response.ok) {
    // 创建提示框元素
    const msgElement = document.createElement('p');
    msgElement.className = 'full sent-message';
    msgElement.textContent = 'Message sent';
    // 插入到表单下方
    document.querySelector('form').after(msgElement);
  }
});

不过看你的代码是用后端渲染页面的，所以这个方案可能不是你当前需要的，但可以作为扩展思路。

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