使用 Next.js + Remult 创建一个待办事项(五)
增加校验
在客户端和服务器端都需要验证用户输入的数据,会导致违反 DRY 设计原则。使用 Remult,验证代码可以放在实体类中,Remult 将在前端和相关 API 请求上运行验证逻辑。
验证标题字段
任务标题是必需的。让我们为此规则添加有效性检查,并在 UI 中显示相应的错误消息。
- 在 Task 实体类中,修改字段 Fields.string 的装饰器 title 以包含对象文字参数并将对象的 validate 属性设置为 Validators.required。
src/shared/Task.ts
1 | string({ . |
导入验证器
Validators 此代码需要添加 from 的导入 remult。
- 在 home/index.tsx 模板中,修改 saveTask 捕获异常的函数。
1 | const saveTask = async () => { |
手动刷新浏览器后,尝试创建一个新的 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 | string<Task>({ . |