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 | undefined
    id: number(),

	// string  + 错误信息  (基本上所有的规则都可以这样自定义错误信息)
    keyName: string().required("名称不能为空"),
    
    // string | undefined  
    currentValue: string(), 
    
    // number | undefined
    keyType: number(), 

	// string | undefined  | null
    sectionName: 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"]),
  })
  //....
});