React SolidJS Svelte 使用 Yup 进行表单验证的最佳实践

React SolidJS Svelte 使用 Yup 进行表单验证的最佳实践

相关网址

Yup官网 (一个通用的验证框架, 可以接入很多的表单验证库)
Felte官网 (同时支持 React Solid Svelte ,以后应该会支持更多的库)
react-hook-form 官网

定义验证规则 与 生成普通的ts类型

更多规则 看官方文档，最大值、最小值、大小写、枚举、默认值、等等

js 中 “undefined === null” 返回结果是 false . 所以是 两种类型 .
想要支持null 类型 , 需要手动指定 nullable()

import { InferType, number, object, string } from "yup"export let RulesInfoModelValidate = object({// number | undefinedid: number(),// string  + 错误信息  (基本上所有的规则都可以这样自定义错误信息)keyName: string().required("名称不能为空"),// string | undefined  currentValue: string(), // number | undefinedkeyType: number(), // string | undefined  | nullsectionName: string().nullable()
});// 使用 InferType, 根据验证规则生成 普通的 ts类型定义
export type RulesInfoModel = InferType<typeof RulesInfoModelValidate>;

另一个例子

// import * as yup from 'yup';
// 也可以使用 yup.object() , yup.string() 等等let yupForm = object({email: string().email().required(),password: string().min(6).max(20).required(),items: array(object({name: string().required('名称不可为空'),address: string().required('地址不可为空'),sex: string().required('性别不可为空'),})),
});

扩充和覆盖 旧的验证规则

通过shape 来操作

let RulesInfoModelValidate2 = RulesInfoModelValidate.shape({keyName: bool(), // 覆盖原来的类型testKey: string() // 新增
})type RulesInfoModel2 = InferType<typeof RulesInfoModelValidate2>;

提取 部分字段

有一些情况,我们只需要验证 其中的一两个字段. 就需要用到 pick / omit
使用方法相同,也都有智能提示

在使用 整体验证的时候 (eg: RulesInfoModelValidate),
测试代码一定要 log输出 所有errors .
防止一些 未显示 的错误,阻止表单的提交, 造成 无反应的假象.
.
例子:
只想验证 keyName,
但 keyType 此时是 null , 用 number | undefined 去验证它,就会失败.
页面中也没有写代码去显示 keyType的错误, 就出现 提交无反应的假象.
此时 log输出一下error对象. 就可以看到所有错误了.
.
上面这种情况,建议使用 pick 只提取出 想要验证的 keyName字段
omit 的思维方式有点逆向了,代码不易懂,
以后加字段, 也会造成不稳定的情况,还是避免使用omit吧

import { createForm } from "@felte/solid";
import { validator } from "@felte/validator-yup";let { form, errors, setFields, reset } = createForm<RulesInfoModel>({// 使用 pick 提取出一个新的验证, 排除剩余的字段,// 防止因为其他字段验证失败,影响表单提交extend: validator({schema: RulesInfoModelValidate.pick(["keyName"]),})//....
});