如何使用Joi给输入字段设置null初始值并避免默认赋值问题

1. 禁用Joi自动注入默认值 #

Joi默认会在校验过程中自动将schema内定义的默认值填充到空字段中，导致未输入内容的字段也符合校验规则，直接在校验配置中添加noDefaults: true选项即可关闭该行为：

• 若直接调用Joi原生validate方法：

const validationResult = yourSchema.validate(inputData, {
  noDefaults: true
})

• 若搭配react-hook-form的joiResolver使用（从你代码中的register方法可判断属于该场景）：

import { joiResolver } from '@hookform/resolvers/joi';
import Joi from 'joi';
import { useForm } from 'react-hook-form';

// 你的表单校验schema
const contactSchema = Joi.object({
  name: Joi.string().required().messages({
    'string.empty': '请输入姓名',
    'any.required': '姓名为必填项'
  })
})

const { register, formState: { errors } } = useForm({
  // 给resolver传入Joi校验配置，关闭默认值注入
  resolver: joiResolver(contactSchema, { noDefaults: true }),
  // 初始化默认值，解决TS报错
  defaultValues: {
    name: '' // 用空字符串替代null，符合input value类型要求
  }
})

2. 解决TypeScript默认值报错问题 #

HTML input元素的value属性本身不接受null类型赋值，因此不要将初始值设为null，改为设置空字符串''即可：

• 空字符串属于合法的string类型，完全符合TS类型校验规则，不会触发2322类型报错
• 关闭Joi默认值注入后，空字符串会命中required校验规则，初始状态就是非法状态，不会误触发你的合法状态动画

额外注意 #

如果你在Joi schema中针对对应字段单独配置了default()规则，也可以直接删除该配置，从根源上避免默认值注入问题。

内容的提问来源于stack exchange，提问作者Alex Motor