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

增加校验

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

验证标题字段

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

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

src/shared/Task.ts

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

导入验证器

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

在 home/index.tsx 模板中，修改 saveTask 捕获异常的函数。

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

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