Formik结合Yup字符串校验失效，搭配Material UI TextField或Formik组件均无效

问题根因 #

Yup的string()类型校验默认开启了自动类型转换，你在输入框中输入的数字内容会被自动转为字符串格式，因此不会触发类型错误。例如输入123会被先转成"123"再校验，完全符合string类型要求，所以你看不到相关报错。

解决方案 #

方案1：关闭Yup自动类型转换 #

直接在对应字段的校验规则中添加strict(true)，禁止自动类型转换，同时可通过typeError自定义类型错误提示：

const validationSchema = yup.object({
    id: yup
        .string()
        .strict(true) // 禁用自动类型转换
        .typeError("该字段必须输入字符串内容") // 自定义类型错误提示
        .min(1, "请输入长度大于1的ID")
        .required("该字段为必填项"),
    // 其余需要校验字符串类型的字段可按同样规则配置
})

方案2：添加自定义格式校验 #

如果你不想关闭全局类型转换，可以新增自定义test规则，对内容格式做限制，比如禁止输入纯数字内容：

id: yup
    .string()
    .test('not-pure-number', 'ID不能为纯数字', value => {
        // 纯数字内容返回false触发报错，你可根据需求调整判断逻辑
        return isNaN(Number(value))
    })
    .min(1, "请输入长度大于1的ID")
    .required("该字段为必填项")

方案3：输入时直接拦截非法内容 #

如果需要实现「非字符串内容直接拒绝录入」的效果，可重写输入框的onChange事件，在内容写入Formik状态前就做拦截：

<TextField
    fullWidth
    id="id"
    name="id"
    label="ID"
    value={formik.values.id}
    onChange={(e) => {
        const inputValue = e.target.value
        // 自定义判断逻辑，比如纯数字内容直接不更新表单
        if (!isNaN(Number(inputValue))) return
        formik.handleChange(e)
    }}
    error={formik.touched.id && Boolean(formik.errors.id)}
    helperText={formik.touched.id && formik.errors.id}
/>

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