HTML表单在车把视图中未显示正确的数据

编程问答 2022-11-12

问题描述

我是第一次使用车把，同时使用sequelize和postgresql创建了一个快速应用程序（由brad遍历提供）。填写表单后，我正在使用Joi验证请求正文，如果出现错误，我将重新渲染表单（视图）并保留原始输入的值。问题是这种情况发生时，文本会被自动修剪。

E.G。我用“ Hello World”填写标题字段，而不填写表单中的其他字段，Joi不会高兴，所以我重新渲染表单（视图），当标题重新填充到表单中时，它将说“你好”。

Gig资源的发布端点 

// Add a Gig
router.post("/add",(req,res) => {
    let { title,technologies,budget,description,contact_email } = req.body;

    const { error } = validateGig(req.body);

    if (error) {
        // Re-Render The Form
        return res.status(400).render("add",{
            error: error.details[0].message,title,contact_email
        });
    } else {
        budget == "" ? (budget = "UnkNown") : (budget = `$${budget}`);

        // Make Lower Case and Remove Space After Comma
        technologies = technologies.toLowerCase().replace(/,/g,",");

        // Insert Into Table
        Gig.create({
            title,contact_email
        })
            .then((gig) => res.redirect("/gigs"))
            .catch((err) => console.log("Error Adding Gig" + err));
    }
});

车把视图 

<section id="add" class="container">
    <div class="form-wrap">
        <h1>Add A Gig</h1>
        <p>Your contact email will be shared with registered users to apply to your gig</p>
        {{#if error}}
        <div class="error">
            <p>{{error}}</p>
        </div>
        {{/if}}
        <form action="/gigs/add" method="POST">
            <div class="input-group">
                <label for="title">Gig Title</label>
                <input type="text" name="title" id="title" class="input-Box"
                    placeholder="eg. Small wordpress website,React developer" maxlength="100" value={{title}}>
            </div>
            <div class="input-group">
                <label for="technologies">Technologies Needed</label>
                <input type="text" name="technologies" id="technologies" class="input-Box"
                    placeholder="eg. javascript,react,PHP" maxlength="100" value={{technologies}}>
            </div>
            <div class="input-group">
                <label for="budget">Budget (Leave blank for unkNown)</label>
                <input type="number" name="budget" id="budget" class="input-Box" placeholder="eg. 500,5000,10000"
                    value={{budget}}>
            </div>
            <div class="input-group">
                <label for="description">Gig Description</label>
                <textarea name="description" id="description" class="input-Box"
                    placeholder="Describe the details of the gig" rows="10">{{description}}</textarea>
            </div>
            <div class="input-group">
                <label for="budget">Contact Email</label>
                <input type="email" name="contact_email" id="contactemail" class="input-Box"
                    placeholder="Enter an email" value={{contact_email}}>
            </div>
            <input type="submit" value="Add Gig" class="btn btn-reverse">
        </form>
    </div>
</section>

解决方法

在模板中使用变量时，您仍然需要在属性值两边加上引号。

例如：

value={{title}}

应写为

value="{{title}}"
handlebars.jshtmljavascriptjoi