使用 REST API 和 Angular 等 JavaScript 前端进行模型验证的最佳实践

Question

我正在过渡到响应速度更快的前端 Web 应用程序，并且我有一个关于模型验证的问题。这是设置：服务器有一个用于插入、更新、检索等的标准 REST API。这可以用 Node 或 Java Spring 编写，没关系。前端是用 Angular（或类似）之类的东西编写的。

我需要弄清楚在哪里放置验证码。以下是要求：

• 所有验证码都应该只写在一个地方。不是客户端和服务器。这意味着它应该驻留在服务器上，在持久化时位于 REST API 内。

• 前端应该能够理解来自服务器的验证错误，并将它们与导致错误的特定字段相关联。因此，如果“用户名”字段是必填字段，客户端可以在该字段旁边放置一个错误，显示“用户名是必填字段”。

• 应该可以验证正确的变量类型。因此，如果我们期待一个数字或日期，而得到一个字符串，则错误将类似于“'Yo' is not a correct date.”

• 错误消息应本地化为用户的语言。

谁能帮帮我？我需要一些简单而强大的东西。

谢谢

Answer 1

当验证您的输入但失败时，您可以以适当的格式返回一个响应（假设您使用JSON）以包含错误消息以及正确的 HTTP 错误代码。

只是在一个带有Symfony 后端的项目上工作，使用FOSRestBundle 来提供适当的 REST API。每当输入出现问题时，使用Symfony 的表单组件会生成结构良好的JSON 响应，其中错误消息映射到字段或顶层（例如，如果有意外输入）。

Answer 2

经过大量研究，我找到了使用 Meteor.js 平台的解决方案。由于它是在服务器和客户端上运行的纯 javascript 解决方案，因此您可以定义一次脚本并让它们在客户端和服务器上运行。

来自 Meteor 官方文档：

client、server 和 tests 子目录之外的文件会同时加载到客户端和服务器上！那是模型定义和其他功能的地方。

哇。如果你问我，只定义一次模型和验证脚本是非常酷的。此外，无需在 JSON 和任何服务器端技术之间进行映射。另外，没有 ORM 映射可以将其放入数据库中。不错！

再次，来自文档：

在 Meteor 中，客户端和服务器共享相同的数据库 API。相同的应用程序代码——比如验证器和计算属性——通常可以在这两个地方运行。但是，虽然在服务器上运行的代码可以直接访问数据库，但在客户端上运行的代码却不能。这种区别是 Meteor 数据安全模型的基础。

对我来说听起来不错。这是最后一个小宝石：

输入验证： Meteor 允许您的方法和发布函数接受任何 JSON 类型的参数。 （事实上​​，Meteor 的有线协议支持 EJSON，它是 JSON 的一个扩展，它也支持其他常见类型，如日期和二进制缓冲区。） JavaScript 的动态类型意味着您不需要在应用程序中声明每个变量的精确类型，但它通常是有助于确保客户端传递给您的方法和发布函数的参数是您期望的类型。

无论如何，听起来我已经找到了解决问题的方法。如果其他人知道定义验证一次并让它在客户端和服务器上运行的方法，请在下面发布答案，我很乐意听到。

谢谢大家。

Answer 3

严格来说，您对任何 CRUD 操作进行验证的最后一个看门人当然是在服务器端。我不知道您应该只在一端（服务器或客户端）处理验证，但通常在双方上对双方用户都更好经验和表现。

假设您的username 字段是必填字段。该字段可以在前端轻松处理；在用户单击submit 然后被发送到服务器然后被返回并显示错误代码之前。 您可以在前端使用单行代码保存往返行程。

当然，有人可能会争辩说，坏人可能会从客户端操纵数据，从而绕过前端验证。这就是我的第一点——你最后的验证守门人应该在你的服务器端。这就是为什么，数据完整性仍然是服务器的工作。确保进入数据库的任何内容都是干净、干燥且有效的。

回答你的问题，（尽管有偏见）AngularJS 仍然是一个非常棒的框架，可以让你进行前端验证，并提供一种很好的方式来进行服务器端错误处理。