使用 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”，消息是这样的："price must be a number type, but the final value was: NaN (cast from the value "a")."

为什么显示不同的消息？

Answer 1

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

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

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

Validation with Yup doesn't show the correct message

javascript

validation

reactjs

yup

formik