NodeJS+PUG如何从客户端访问Render变量并通过SweetAlert提示错误

步骤1：在PUG模板中暴露后端错误变量 #

后端已经把errores变量传给了PUG模板，你需要在模板里把这个变量转换成前端JS能访问的全局变量。在模板的<head>或者引入app.js之前的位置，添加以下代码：

script.
  // 把后端传来的错误数组转为全局可访问的变量
  window.formErrors = !{JSON.stringify(errores)};

这里用!{}是PUG的插值语法，会直接把JSON字符串输出到JS代码里，避免转义问题。

步骤2：在app.js中检测错误并触发SweetAlert #

在public/js/app.js里，添加检测逻辑，当存在错误时调用SweetAlert弹出提示：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 检查全局变量中是否有错误
  if (window.formErrors && window.formErrors.length > 0) {
    // 遍历所有错误，逐个弹出提示
    window.formErrors.forEach(error => {
      Swal.fire({
        icon: 'error',
        title: 'Oops...',
        text: error.texto
      });
    });
  }
});

补充说明 #

• 确保你已经在页面中正确引入了SweetAlert的JS和CSS文件，否则Swal对象会找不到。
• 如果只需要弹出第一个错误，直接取window.formErrors[0].texto即可，不用遍历。

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