如何解决HTML表单在车把视图中未显示正确的数据
我是第一次使用车把,同时使用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}}"
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。