logo标签列表

Yup和Joi用于前端验证，哪个更好？

validationfrontendjoiyup
34

我想使用Yup或Joi之一来实现前端验证。

从我找到的所有文档和文章中，我得出了几个结论：

但是，我没有找到Joi相对于Yup缺乏哪些支持?

现在，从所有这些结论中，要么选择较小的捆绑包，要么选择更好的性能。

1
Yup.InferType<typeof schema> 是我最常用的函数之一。它消除了为相同对象定义类型两次的必要性。Joi 中没有这样的选项，这增加了引导代码。 - Shubham Prasad
3个回答
33
过去，Joi缺乏浏览器支持，至少在开箱即用方面是这样的。它使用了一些Node.js API来实现一些功能，在浏览器中这些API是不可用的。虽然仍然可以在其上使用Browserify，或使用非官方的joi-browser npm包，但这个过程很繁琐，因此在前端中看到joi的使用较少。Yup基本上就是为此而设计的。
然而，这些信息已经过时了，因为joi现在包含一个官方的浏览器构建版本，易于使用，大小与yup大致相同。请参阅它的package.json: https://github.com/sideway/joi/blob/83092836583a7f4ce16cbf116b8776737e80d16f/package.json#L8 您的打包工具（假设已正确设置）应该会自动检测到浏览器构建并使用它。例如，如果您正在使用Rollup，请确保使用带有browser: true选项的@rollup/plugin-node-resolve。
我强烈建议现在在前端中使用joi，因为您可以在前端和后端之间共享模式，这真的很棒。
有趣的... - Hendy Irawan
非常有趣的观点，但现在考虑到2023年情况的变化。Joi的捆绑包大小似乎比Yup大。我的建议是，我们可以很容易地使用chatGPT将Joi验证模式转换为Yup。我们不需要花费太多时间从头开始创建。使用chatGPT，可以轻松转换并优化前端。 - Voon Tao Tan
2023年，我在前端仍然毫無問題地使用joi。如果你使用像esbuild或rollup這樣的良好打包工具設置，捆綁大小就很好。在後端和前端之間共享模式是可愛的。我看不出使用yup的理由。 - Seth Holladay
15

对于前端性能而言，包大小比快速工作更重要（您不需要在客户端进行数百万次验证）。正如您所提到的：“Yup的包大小[60.1kB]是Joi的2.5倍小 [145.9kB] - 链接”。

因此，我的选择是Yup。

但是，如果您在后端使用Joi并且打算与前端共享架构，则我同意Seth Holladay的看法。

1
你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community
0
我会倾向于使用joi，即使你只是在前端使用它，因为越来越多的nodejs后端工作正在转向Nestjs。在nestjs的文档https://docs.nestjs.com/techniques/configuration#using-the-configservice中，在部分注册中使用joi进行模式验证。 所以yup可能是一个稍微更好的工具，但是为了与未来项目中的后端开发人员进行沟通，我建议至少学习joi。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接