一、教程目标

• 学习如何在表单中添加验证规则。
• 掌握使用 JSON 配置表单验证规则的方法。
• 实现前端和后端的表单验证。

二、教程内容

1. 前端表单验证

• 步骤 1：找到表单编辑
  • 在页面上找到需要编辑的表单，如注册表单或登录表单。
• 步骤 2：添加验证规则
  • 在表单的编辑界面中，找到“验证规则”一栏。
  • 选择“详细规则”，在弹出的“表单规则”编辑器中添加验证规则。
• 步骤 3：配置验证规则
  • 使用 JSON 格式配置规则，例如：

    [{ "required": true }]
    

• 步骤 4：测试验证效果
  • 保存配置后，在页面上尝试触发表单提交，检查验证效果。

2. 后端表单验证

• 步骤 5：打开注册接口编辑
  • 在后端服务中找到注册接口。
• 步骤 6：增加用户名密码不为空的判断
  • 添加条件判断节点，设置当用户名或密码为空时，返回错误提示。
• 步骤 7：编写错误提示信息
  • 在条件判断节点中设置返回的错误代码和提示信息。
• 步骤 8：测试后端验证
  • 保存接口设置，通过调试接口测试验证效果。

3. 登录接口验证

• 步骤 9：复制注册接口的验证规则
  • 将注册接口的验证规则复制到登录接口。
• 步骤 10：测试登录接口验证
  • 保存登录接口设置，并通过调试进行测试。

三、注意事项

• 验证规则需根据实际需求进行配置。
• 前端和后端的验证是相互独立的，都十分重要。
• 在调试时，可以直接在接口编辑页面进行，方便快捷。

四、教程总结

本教程学习了如何在前后端添加和配置表单验证规则，以及如何测试验证效果。通过本教程的学习，可以有效地提高表单输入的安全性，防止无效数据的提交。

五、预告

下一节课将介绍表单公用节点抽取的开发，敬请期待。