Nodejs在post请求到后台数据时，如果验证出错，如何实现表单数据回填 除了传表单数据到get页面挨个赋值，还有别的办法吗，怎么实现象struts那样的自动回填

Nodejs在post请求到后台数据时，如果验证出错，如何实现表单数据回填
除了传表单数据到get页面挨个赋值，还有别的办法吗，怎么实现象struts那样的自动回填

5 回复

Node.js 在 POST 请求到后台数据时，如果验证出错，如何实现表单数据回填？

在处理表单提交时，经常需要验证用户输入的数据。如果验证失败，通常需要将用户重新导向回表单页面，并且保持之前填写的数据不变。这可以通过多种方法来实现，包括使用中间件和模板引擎来简化这一过程。

方法一：使用模板引擎的自动回填功能

大多数现代的模板引擎（如 EJS、Pug 或 Handlebars）都提供了自动填充表单字段的功能。这些模板引擎可以在渲染表单时自动填充先前提交的数据。

示例代码

  1. 安装依赖

    npm install express ejs body-parser

  2. 创建服务器文件 app.js

    const express = require('express');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('index');
});

app.post('/submit', (req, res) => {
  const { name, email } = req.body;

  // 验证逻辑
  if (!name || !email) {
    return res.status(400).render('index', { 
      error: 'Name and Email are required.', 
      formData: req.body 
    });
  }

  res.send('Form submitted successfully!');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

  3. 创建模板文件 views/index.ejs

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Form</title>
</head>
<body>
  <h1>Submit Form</h1>
  <% if (error) { %>
    <p style="color: red;"><%= error %></p>
  <% } %>
  <form action="/submit" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" value="<%= formData.name %>">
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" value="<%= formData.email %>">
    <br>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

解释

在这个示例中：

  1. 使用 body-parser 中间件解析表单数据。
  2. 使用 EJS 模板引擎渲染表单。
  3. 当验证失败时，重新渲染表单页面，并传递错误信息和表单数据。
  4. EJS 模板引擎会自动填充之前提交的数据。

这种方法不仅简洁，而且避免了手动逐个赋值的繁琐步骤，实现了类似 Struts 的自动回填功能。


弄个实体对象，在你的表单里用该实体对象填充值，新建表单用新建的实体，验证失败回显表单用你提交验证后的实体

<input value="{{entity.someFiled}}" />

这种要每个页面手工填充 如果后台验证出错，直接返回一个json,页面引用一个js,统一进入填充

这个json格式是这样 ｛ok:’　提示信息’}

验证失败的情况

｛error:[{field:'username',value:'xxx',tips:'not empty'},
{field:'cateogry',value:'3',tips:'not empty',type:'select'},
{field:'likes',value:'3,5',tips:'not empty',type:'checkbox'},
...

这样客户端只要写一个统一的函数来解析这个json,实现回填和提示语 提示语可以在表单后面动态创建一个Ｓpan（检测一下没有创建，有就设置innerHTML是tips) 当然　也可以在form的html结构里写好空的span,程序这样做只是为了容错处理 ]}

在Node.js中处理POST请求时，如果验证失败，需要将表单数据回填到前端页面。你可以使用中间件（如express）来简化这一过程，并通过模板引擎（如EJS、Pug等）将数据传递给前端。

方法

  1. 使用Session：将表单数据存储在session中，当验证失败时从session中读取并显示。
  2. 使用Flash消息：类似于session，但通常用于短暂信息的传递。
  3. 直接传递数据：在响应对象中直接携带数据到视图层。

示例代码

假设我们有一个简单的注册表单：

HTML (使用EJS模板引擎)

<!-- views/register.ejs -->
<form action="/register" method="POST">
    <input type="text" name="username" value="<%= username %>">
    <input type="password" name="password">
    <button type="submit">Register</button>
</form>

Node.js Express路由

const express = require('express');
const session = require('express-session');
const app = express();
app.use(express.urlencoded({ extended: true }));
app.use(session({
    secret: 'your-secret-key',
    resave: false,
    saveUninitialized: true
}));

app.get('/register', (req, res) => {
    res.render('register', { username: req.session.username });
});

app.post('/register', (req, res) => {
    const { username, password } = req.body;
    if (!username || !password) {
        req.session.username = username; // 将错误前的数据保存到session
        return res.status(400).render('register', { errors: ['Username and password are required.'] });
    }
    // 正常处理逻辑
    res.send('Registered successfully');
});

解释

  1. 获取数据：req.body 获取POST请求中的表单数据。
  2. 验证数据：如果验证失败，将错误数据存储在req.session中。
  3. 渲染视图：在响应中直接使用res.render方法，将之前存储的数据传递给EJS模板。
  4. 模板引擎：在模板文件中，通过<%= username %>将数据填充到输入框中。

这种方式可以有效地避免手动将每个字段赋值到页面，从而提高开发效率和用户体验。

回到顶部