Nodejs express ejs 表单数据 绑定?

Nodejs express ejs 表单数据 绑定?

做个小demo里面有表单

<input type=‘text’ name=‘name’ value=’<%= company.name%>’ />

表单校验失败后需要给name值

有没有好办法 不这样写呢？

value=’<%= typeof company === ‘undefined’ || typeof company.name === ‘undefined’ ? ‘’ : company.name %>’

求高见！


3 回复

当然可以。在使用 Node.js、Express 和 EJS 进行开发时，处理表单数据绑定是一个常见的需求。特别是当你需要在表单校验失败后保留输入的数据，并显示错误信息时。这里有一个简洁的方法来实现这一点。

示例代码

首先，确保你已经安装了 Express 和 EJS：

npm install express ejs

然后，创建一个简单的 Express 应用程序，包括一个表单页面和一个处理表单提交的路由。

1. 设置 Express 和 EJS

在你的 app.js 或 server.js 文件中：

const express = require('express');
const app = express();

// 设置模板引擎为 EJS
app.set('view engine', 'ejs');

// 设置静态文件目录
app.use(express.static('public'));

// 使用 body-parser 中间件解析表单数据
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));

app.get('/', (req, res) => {
    // 初始渲染表单时，company 可能未定义
    res.render('index', { company: {} });
});

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

    if (!name) {
        // 如果表单验证失败，重新渲染表单并带上错误信息
        res.render('index', { company: { name }, error: 'Name is required.' });
    } else {
        // 验证通过，处理业务逻辑
        res.send('Form submitted successfully!');
    }
});

app.listen(3000, () => console.log('App listening on port 3000'));

2. 创建 EJS 模板

在 views/index.ejs 文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Example</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="<%= company.name || '' %>">
        <button type="submit">Submit</button>
    </form>
</body>
</html>

解释

在这个示例中，我们使用了 EJS 的条件渲染和默认值表达式来简化代码。具体来说：

  • EJS 表达式 <%= company.name || '' %>：如果 company.name 不存在或为 undefined，则默认值为空字符串。
  • 服务器端逻辑：当表单提交失败时，我们将错误信息和用户输入的数据一起传递回视图，以便重新渲染表单并显示错误提示。

这种方法不仅使代码更简洁，还提高了可读性和维护性。希望这对你有帮助！


双向数据绑定我只推荐knockout.js

在使用 Node.js 和 Express 框架配合 EJS 模板引擎时，处理表单数据绑定可以更加简洁。你可以利用 EJS 的条件判断和默认值设置来简化你的代码。

首先，确保你在表单中正确地传递数据。例如，假设你在服务器端有一个中间件用于处理表单提交并验证数据，如果验证失败，你将错误信息和原始表单数据返回到客户端。

示例代码

服务器端 (Node.js + Express)

const express = require('express');
const app = express();
app.use(express.urlencoded({ extended: true }));

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

app.post('/form', (req, res) => {
    const { name } = req.body;
    
    // 这里只是简单地检查name是否为空
    if (!name) {
        res.render('form', { 
            company: { name: req.body.name }, 
            errors: ['Name is required']
        });
    } else {
        res.send('Form submitted successfully!');
    }
});

客户端 (EJS 模板)

<!DOCTYPE html>
<html>
<head>
    <title>Form Example</title>
</head>
<body>
    <h1>Submit your information</h1>
    <% if (errors && errors.length > 0) { %>
        <ul>
            <% for (let error of errors) { %>
                <li><%= error %></li>
            <% } %>
        </ul>
    <% } %>
    <form action="/form" method="POST">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" value="<%= company.name || '' %>">
        <button type="submit">Submit</button>
    </form>
</body>
</html>

解释

  1. 服务器端：在处理 POST 请求时，我们检查 name 是否为空。如果为空，则渲染表单页面并将错误消息和用户输入的数据一起发送回去。

  2. 客户端：在 EJS 模板中，我们可以直接使用 <%= company.name || '' %> 来设置输入框的 value 属性。这里使用了 EJS 的模板语法，它会检查 company.name 是否存在，如果不存在则返回空字符串 ''。这样可以避免复杂的条件判断语句。

这种方法不仅更简洁，而且更具可读性和维护性。

回到顶部