node.js - 如何在ejs中显示快速错误

Question

我正在验证用户使用“emailCheck”输入的电子邮件以及我在另一个问题上找到的一段代码，这是我的应用程序中的代码:

app.post("/blog", (req, res) => {
    const name = req.body.name;
    const email = req.body.email;

    emailCheck(email).then(() => {
        const newSubscriber = {name: name, email: email};
        Subscriber.create(newSubscriber).then(() => {
            res.redirect("/blog")
        })
        .catch((error) => {
            res.json({serverErrorEmailExistence: "This email adress is already in use!"})
        })
    })
    .catch(() => {
        res.json({serverErrorEmailExistence: "This Email doesn't exist!"})
    })
})

这按原样工作，但错误显示在新的空白页上。我想在我拥有的表格下显示错误。表单作为部分包含在我的应用程序中。

这是html表单:

<section id="emailSub">
    <div id="emailContainer">
        <h1>Subscribe to my Newsletter</h1>
        <p>You will get weekly emails when a post is published.</p>
        <form action="blog" method="POST" id="emailForm" autocomplete="off">
            <div class="field">
                <input type="text" placeholder="Name: " name="name" required>
            </div>
            <div class="field">
                <input type="email" placeholder="Email: " name="email" required>
            </div>
            <button type="submit">Subscribe!</button>
        </form>
    </div>

    <div id="thankYouMsg">
        <h1>Thank you for subscribing!</h1>
        <p><i class="far fa-check-circle"></i></p>
    </div>

    <button id="exitForm"><i class="fas fa-times"></i></button>
</section>

我在博客主页上包含以下内容:

<%-include("partials/subscribe") %>

这是我的订阅者模型:

const mongoose = require("mongoose");

const SubscriberSchema = new mongoose.Schema({
    name: {
        type: String,
        required: true
    },
    email: {
        type: String,
        required: true,
        unique: true
    }
});

module.exports = mongoose.model("Subscriber", SubscriberSchema)

如何在表单中显示该错误？
表单提交成功后会显示ID为thankYouMSg的div，通常用css隐藏。

我尝试搜索这个并找到了很多答案，但我要么不知道如何将它们包含在我的代码中，要么我理解不够，无法搜索正确的答案(可能两者兼而有之)。老实说，我只是尽我所知将 emailcheck 代码包含在我的应用程序中。我真的不明白 .catch(error) 正在传递什么。

谢谢

按照我尝试的答案:

.catch(() => {
            res.render("/blog", {errorMessage: "This email adress is already in use!"});
        })
    })
    .catch(() => {
        res.render("/blog", {errorMessage: "This Email doesn't exist!"})
    })

但是，我得到“无法在 View 中查找 View /博客”。我也试过了
res.redirect 它只是加载而没有任何事情发生。

Answer 1

发生的情况是，如果发生错误，您会捕获此错误并返回 json -浏览器无法直接在html中呈现的响应.

相反，您可以做的是重新发送您的订阅页面并将捕获的错误消息传递到该页面，您可以在那里呈现。这样的事情应该可以帮助您入门:

在你的 app.js

...
.catch(() => {
    res.render("your-subscribe-template.ejs", {
        errorMessage: 'This Email doesn\'t exist!'
    });
});
...

在你的 template.ejs 中:

...
<% if (typeof errorMessage !== "undefined") { %>
    <p>Form could not be submitted due to the following error:</p>
    <p><%= errorMessage %></p>
<% } %>
...