使用 Next.js + Remult 创建一个待办事项(五)
Yakim Zhang

增加校验

在客户端和服务器端都需要验证用户输入的数据,会导致违反 DRY 设计原则。使用 Remult,验证代码可以放在实体类中,Remult 将在前端和相关 API 请求上运行验证逻辑。

验证标题字段

任务标题是必需的。让我们为此规则添加有效性检查,并在 UI 中显示相应的错误消息。

  1. 在 Task 实体类中,修改字段 Fields.string 的装饰器 title 以包含对象文字参数并将对象的 validate 属性设置为 Validators.required。

src/shared/Task.ts

1
2
3
4
@Fields.string({
validate: Validators.required
})
title = '';

导入验证器

Validators 此代码需要添加 from 的导入 remult。

  1. 在 home/index.tsx 模板中,修改 saveTask 捕获异常的函数。
1
2
3
4
5
6
7
8
const saveTask = async () => {
try {
const savedTask = await remult.repo(Task).save(task);
setTasks(tasks.map((t) => (t === task ? savedTask : t)));
} catch (error: any) {
alert(error.message);
}
};

手动刷新浏览器后,尝试创建一个新的 task 或保存一个空标题的现有浏览器 -显示“不应为空”错误消息。

隐式服务器端验证

我们添加的验证代码由服务器端的 Remult 调用,验证修改 title 字段。

向 API 路由发出以下 POSThttp 请求 http://localhost:3000/api/tasks,提供无效的标题。

1
curl -i http://localhost:3000/api/tasks -H "Content-Type: application/json" -d "{\"title\": \"\"}"

返回一个 http 错误,验证错误文本包含在响应正文中,

自定义验证

validate 字段装饰器的第一个参数的属性可以 Remult 设置为箭头函数,该函数将被调用以验证前端和后端的输入。

src/shared/Task.ts

1
2
3
4
5
6
7
@Fields.string<Task>({
validate: (task) => {
if (task.title.length < 3)
throw "Too Short";
}
})
title = '';