使用 Yup 进行验证未显示正确的消息

Question

我正在使用Yup 和 Formik 来验证一些字段。

其中一个必须是数字，所以它是这样完成的：

import * as Yup from 'yup';

...

const requiredErrorMessage = 'This field is required';
const numberErrorMessage = 'This field is must be numerical';

 const validationSchema = Yup.object({
      anotherField: Yup.string().required(requiredErrorMessage),
      numberField: Yup.number(numberErrorMessage).required(requiredErrorMessage),
 });

因此，如果引入的字符与数字不同，我希望它会显示消息“此字段必须是数字”。

但事实并非如此。如果我在字段中写“a”，则消息是这样的：“价格必须是number 类型，但最终值是：NaN（从值"a" 转换）。”

为什么显示不同的消息？

Answer 1

对于数字类型的自定义消息，您应该调用 typeError() 函数：

numberField: Yup.number().typeError(numberErrorMessage).required(requiredErrorMessage),