使用Yup表单验证时遇Uncaught TypeError错误，求解决方案

错误原因 #

你遇到的错误：

Uncaught TypeError: (0 , yup__WEBPACK_IMPORTED_MODULE_5__.string)(...).name is not a function

核心问题是：Yup的字符串校验规则里没有name()这个方法，你调用了一个不存在的API，导致抛出类型错误。

修正方案 #

方案1：用label()设置字段友好名称（推荐） #

如果你想给字段设置一个友好的显示名称，用于在错误提示中替代字段名（比如把name换成“姓名”），可以使用Yup提供的label()方法：

import * as yup from "yup"

validationSchema: yup.object({
        name: yup.string()
            .label("姓名")
            .required("该字段不能为空")
            .minLength(3, "${label}长度不能少于3个字符") // 可通过${label}引用设置的名称
            .maxLength(20, "${label}长度不能超过20个字符"),
})

方案2：直接在校验规则中写明确提示 #

如果只是想提示用户输入有效名称，不需要单独设置字段名，直接把提示信息整合到对应校验规则里即可：

import * as yup from "yup"

validationSchema: yup.object({
        name: yup.string()
            .required("该字段不能为空")
            .minLength(3, "请输入有效的姓名，长度不能少于3个字符")
            .maxLength(20, "姓名长度不能超过20个字符"),
})

补充说明 #

Yup的字符串校验链支持的方法包括required()、minLength()、maxLength()、email()、matches()等，name()并非官方提供的API，你可能是混淆了其他表单验证库的用法。如果需要自定义校验逻辑，可以使用test()方法实现。

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