表单验证不再繁琐：Yup、Zod、Joi及React的邂逅
引言
在Web开发中，我们不断发觉，凡是甚至连简单的网页也可以涉及到大量的用户输入，而处理这些输入，确保它们达到预期的规格和格式，就变成了一项必不可少的工作。这就是我们说的表单验证。在我们构建的数十个、数百个甚至数千个表单中，表单验证作为一项基础功能，其重要性不言而喻。
表单验证并非易事。我们需要处理不同的数据类型、满足复杂的业务规则，应对来自前端和后端的验证，并制定出用户友好的错误消息。此外，我们也要考虑到性能，需要确保我们的验证逻辑不会对用户体验或者服务器负担造成太大的影响。这些因素共同构成了我们面临的挑战，它们可能会使得表单验证变成一项既繁琐又困难的任务。
然而，随着Yup、Zod、Joi等库的出现，表单验证的过程得以大大简化。这些库为我们提供了强大的工具，帮助我们处理各种各样的验证场景。而且，最振奋人心的是，这些工具能和React的钩子函数完美配合，与React Hook Form、Formik等React库一同使用，为React应用带来高效、强大的表单验证能力。
本文的目标就是要详细介绍这些工具，以及如何使用它们来进一步优化您的表单验证任务，帮助大家把更多的精力放在实现业务逻辑上，而不是不断地与表单验证斗争。现在，就让我们一起，一头扎入到这些库和工具的深海中，寻找更好的表单验证之路。
Yup、Zod、Joi——JSON验证库简介
Yup
我们先来看Yup，一个使用JavaScript编写的对象架构验证库。我们可以一步步构建出相应的验证对象模式。其优点在于它的声明式语法，使代码简洁易读，并且它支持同步与异步操作。
import * as yup from 'yup';
let schema = yup.object().shape({
name: yup.string().required('Name is required.'),
email: yup.string().email('Email format is incorrect.').required('Email is required.'),
});
schema
.validate({ name: "", email: "not_a_valid_email"})
.catch(err => {
console.error(err.errors);
});
在这个例子中，如果名称没有填写，将会抛出 'Name is required.'的错误。对于错误的电子邮件格式，将会抛出'Email format is incorrect.'的错误。。
Zod
Zod也提供了丰富的类型和简洁的API，让我们能够以类型友好的方式去构建复杂的表单验证。它为TypeScript开发者提供了一种优雅的方式来进行表单验证。
import { z } from "zod";
const schema = z.object({
name: z.string().nonempty({message: "Name is required."}),
email: z.string().email({message: "Email format is incorrect."}),
});
schema.parseAsync({ name: "", email: "not_a_valid_email" })
.catch(error => {
console.error(error.errors);
});
Zod 验证中，和 yup 相似，如果名称缺失或者电子邮件格式错误，都将抛出对应自定义的错误消息。
Joi
Joi主要用于服务端的输入验证，这种验证旨在保证用户输入数据的准确性和完整性，也能有效预防SQL注入或其他形式的攻击。
import Joi from "joi";
const schema = Joi.object({
name: Joi.string().alphanum().min(3).max(30).required().messages({
'any.required': 'Name is required.'
}),
email: Joi.string().email().required().messages({
'any.required': 'Email is required.',
'string.email': 'Email format is incorrect.'
})
});
const result = schema.validate({ name: "", email: "not_a_valid_email" });
if (result.error) {
console.error(result.error.details);
}
与前两者相似，Joi 的自定义错误消息通过在验证规则后附加 .messages({}) 方法进行定义，当名称缺失或者电子邮件格式错误时，都将抛出自定义的错误消息。
确实，虽然Yup、Zod和Joi都是表单验证库，用途相近，但在使用和实现上有些许区别。这些区别可能会影响开发者对于选择哪一个库进行工作的决策。下面我会列举这些库之间的一些主要区别。
1. Yup
Yup主要设计用于浏览器环境，它提供了一种和JavaScript链式编程模式类似的声明方式，这使得我们的代码看上去既简洁又具有表达力。虽然支持异步操作，Yup并不支持同步校验，这意味着你不能在回调中直接获取校验结果，而必须通过 Promise 的方式获取。此外，Yup也没有提供类型推导，所以如果你在使用TypeScript，你可能无法获取Yup的表单验证结果。
2. Zod
Zod的一大特点就是与TypeScript有着良好的集成，它可以在TypeScript中生成对应模型的类型，这种特性将对使用TypeScript的开发者有巨大的帮助。Zod包括Yup的所有功能，并且支持同步校验，提供了更好的错误处理和自定义错误消息。但是，Zod跟Joi相比，可能在处理更加复杂的验证逻辑时可能稍微逊色。
3. Joi
Joi较为独特，它更适用于服务器端验证，尽管也支持浏览器环境。Joi主打的功能是创建和处理复杂的数据架构，所支持的数据类型相对丰富。它提供了非常多的验证选项，这能望开发者在服务器端进行相对复杂的校验。
带着这些对比，我们可以看到，尽管这三个库解决的问题大体相似，但在实际应用中，他们各有千秋。需要根据你的项目需求，语言使用（是使用JavaScript还是TypeScript），是在前端还是在后端进行表单验证等多方面进行选择。不论你的选择是哪一个，他们都可以为你的表单验证工作带来方便。
总结，Yup、Zod、Joi这三个库都是功能强大的表单验证工具。他们可以简化我们的代码，提高我们的开发效率，使我们的应用更加稳健。当我们理解他们的优缺点，找到最适合项目的验证库时，我们的产出效率将会大大提升。
React Hook Form与Formik简介
在React.js项目中，React Hook Form和Formik都是被广泛使用的表单库。它们提供了一组实用的API，可以大大简化React表单的状态管理，验证以及错误处理等任务，使你的表单更容易创建和维护。这两个库与表单验证库如Yup和Zod可以进行很好的集成，提供完整且优雅的解决方案。
React Hook Form
React Hook Form是一个提供了基于钩子(Hooks)的表单验证方法的轻量库，它采用了HTML表单验证标准以避免重复的渲染。具有较小的包大小和性能优化等优点。
使用React Hook Form的register函数，可以将输入元素与验证规则相关联。同时，React Hook Form通过handleSubmit方法提供了对错误处理的支持。
对于更复杂的验证规则，React Hook Form还可以很好的与Yup、Zod等验证库进行整合。如下是一个与Yup配合使用的例子：
不知道为啥这里插入代码片段会报错，所以用图片代替
在此例中，React Hook Form接收Yup的模式作为useForm的validationSchema参数，然后就可以处理复杂的表单验证和错误处理了。
Formik
Formik是另一个重要的React库，专注于提供更清晰、简单的表单状态管理。除了处理表单的状态，Formik还提供了表单提交处理，输入验证以及错误消息处理等功能。对于验证，Formik有两种方式，一种是在Field级别进行验证，另一种方式是提供一个进行总体验证的函数。同时，Formik对于第三方验证库也是支持的，如Yup。
如下示例展示了Formik和Yup一起使用的情况：
不知道为啥这里插入代码片段会报错，所以用图片代替
这个例子中，Formik通过validationSchema属性接收Yup的校验模式，并且自动运行这些校验规则，错误信息通过Formik的 ErrorMessage 组件来处理。
总结，React Hook Form和Formik都是优秀的React表单库，可与Yup、Zod等表单验证库进行高度整合。在处理表单验证时，它们可以使得验证更直观、一目了然，提升了代码的可阅读性，同时也节省了繁冗的表单处理工作，使得开发人员可以专注于业务逻辑的实现。
如何选择合适的库和工具
何时、何地、如何选择合适的工具，实际上是对于项目需求的理解和评估。
- 如果你的项目是在React环境下，例如创建SPA(Single Page Application)，React Hook Form和Formik都是由社区驱动，社区活跃，不断更新和完善的优秀库，值得考虑。使用它们可以大大提升开发效率。
- 如果你的项目使用了TypeScript，Zod会是一个很好的选择，因为它为TypeScript用户提供了类型安全的验证。
- 对于一些复杂的表单验证，比如包含数组，嵌套对象等复杂类型的验证，Joi倾向于为开发者提供更多的options和方法去处理这类问题。
- 如果你的表单需要处理大量的表单状态更新，React Hook Form会比Formik更具有优势，它更加灵活并减少无意义的重渲染。
- 最后，实战经验也很重要。使用过哪个库并且对这个库较熟悉，那就用这个库会更好。大部分的库都可以解决相似的问题，但是具体怎么用，怎么最大效率的用，需要的就是实战经验。
综上所述，根据项目的实际需求选择合适的工具是很重要的。这可能会涉及到你的项目类型、项目使用的主要编程语言、你的个人或团队的技能和经验等因素。对于不同的问题，Yup，Zod，Joi，React Hook Form和Formik都有它们各自解决问题的方法和优点。所以，选择哪一个并没有绝对的对错，只有更适合项目的选择。
结论
表单验证就像我们搭建完美应用的桥梁，连接了我们的应用与用户之间的交互。在这片文章中，我们探讨了Yup、Zod、Joi，React Hook Form和Formik等一些流行的验证工具和库。这些工具极大的简化了我们进行表单验证的工作，增强了验证的精度，也增进了用户体验。
尤其是Yup、Zod、Joi，这些工具给予了我们声明式，简洁且优雅的表单验证的可能。而React Hook Form和Formik则提供了一种简单易用的方式，让我们能在React项目中更便捷的使用这些验证工具。这些库让我们可以更专注于业务逻辑的实现，而不需要花费过多的时间去处理表单的状态管理和错误处理。
总的来说，通过对这些工具的理解和使用，我们可以为我们的网页应用带来更高效、优雅的表单验证。我强烈推荐读者在你们的项目中尝试使用这些工具，去感受他们带给你们工作的便捷，他们会让你们爱上表单验证。
参考资料和进一步阅读
想要更加深入了解这些工具的读者，可以参考以下的一些链接：
Yup：
Zod：
Joi:
React Hook Form:
Formik：
浙公网安备 33010602011771号