Formik Yup 即使满足要求也显示错误

Question

我希望 TextInput 准确验证 16 位数字。我尝试了以下方法：

yup.number()
  .test('len', 'Must be exactly 16 numbers', val => val.length === 16)

但是，每次我在字段中输入任何内容时，我都会得到以下信息：

Possible Unhandled Promise Rejection

我尝试了以下方法：

yup.number().max(16)

但是，即使我输入了 16 个数字，它仍然会报错说它必须小于或等于 16 个字符。

更新的实现：

<Formik
   initialValues={{ someInput: Number }}
   onSubmit={submitHandler}
   validationSchema={yup.object().shape({
   someInput: yup
       .number()
       .test('len', 'Must be exactly 16 numbers', val => val.toString().length === 16)
       .positive()
       .integer()
       .required(),
})>

以下是我的TextInput

                                           <TextInput
                                                value={values.someInput}
                                                onChangeText={handleChange('someInput')}
                                                onBlur={() => setFieldTouched('someInput')}
                                                placeholder="some input"
                                                style={styles.someInput}
                                            />
                                            {touched.someInput && errors.someInput &&
                                                <Text style={{ fontSize: 10, color: 'red' }}>{errors.someInput}</Text>
                                            }

Answer 1

那是因为数字没有 length 属性。您需要先将其转换为字符串。此外，检查数字上的 max 会在任何大于 16 的数字上出错，而不是长度超过 16 位的数字。

yup.number()
  .test('len', 'Must be exactly 16 numbers', val => val.toString().length === 16)

Formik Yup 即使满足要求也显示错误

Formik Yup showing error even when it meets the requirement

reactjs

react-native

yup

formik