表单验证的一点实践

2023年6月22日 · 299 字 · 2 分钟 · 表单生成器 Yup Zod Vee-Validate

背景 表单验证的功能较为简单，但如果没有合适的轮子，一遍一遍去写繁琐的校验逻辑会让人崩溃。翻阅了几个表单库后，最终选择了 VeeValidate。本文记录一下使用过程。 简介 VeeValidate 提供了两种使用方式，一种是组件式，另一种是 Composition API 式。组件式适合小点的场景，不需要做太多封装，使用简单；Composition API 式适合有着很多表单的中大型应用，有着较强的可定制性。我选择使用 Composition API，因为此次实践的目标接近于造一个表单生成器，而且这种方式更加无头。 已知问题 本项目的输入控件包含了 NaiveUI 的输入控件（如 NInput, NSelect）。 本项目的输入控件也包含自定义的一些输入控件。而 NaiveUI 的 NFormItem 组件，没有将 Trigger 开放出来。所以用 NaiveUI 的表单验证组件无法满足需求。 解决这俩个问题的办法不难，那就是使用 VeeValidate Composables 封装出一套跟 NaiveUI 类似的 CustomForm 及 CustomFormItem，并将 useField 的 handleBlur 等方法 通过 SlotProps 由 CustomFormItem 传给输入控件（无论是 NaiveUI 的控件还是自定义控件）。 过程 Schema Validator VeeValidate 提供了两种方案。一种是 Yup, 一种是 Zod。Zod 的名声大一些使用者也多一些，但 Yup 也不差。因为 Zod 的国际化没有 Yup 这么简单，所以没有花费时间去深究而直接选用了 Yup。 除了这两个，市面上还有一些其他 Schema Validator，比如近期出现的 Valibot，主打一个体积小。 Internationalization 在 VeeValidate 中配置国际化要按照 Schema Validator 的方式来。对于 Yup 来说，主要就是声明多种错误类型的错误消息。 将类似下面的代码放入某层 Provider 即可。