Question

我正在使用Yup验证Formik表单，但是我不知道如何在Yup / Formik中验证单选输入。

Answer 1

从理论上讲，它不应与任何其他值相同。您正在状态中最有可能以字符串的形式跟踪无线电值（或Formik为您跟踪的无线电值），只需要将规则应用于要存储的值。

如果您要确保该值仅与显示的单选选项匹配，则可以使用oneOf来完成此操作，但是与其他标量值没有什么不同。

Answer 2

您验证无线电组。唯一可能的验证失败是，如果您没有选择默认按钮，并且用户没有选择任何单选按钮。

给出：

<RadioButtonGroup
    id="radioGroup"
    label="One of these please"
    value={values.radioGroup}
    error={errors.radioGroup}
    touched={touched.radioGroup}
>
    <Field
        component={RadioButton}
        name="radioGroup"
        id="radioOption1"
        label="Choose this option"
    />
    <Field
        component={RadioButton}
        name="radioGroup"
        id="radioOption2"
        label="Or choose this one"
    />
</RadioButtonGroup>

验证码：

    radioGroup: Yup.string().required("A radio option is required")

在上下文中使用：

<Formik
    ...
    validationSchema={Yup.object().shape({
        radioGroup: Yup.string().required("A radio option is required"),
        ...
    })}

从此较大的验证示例复制：

https://gist.github.com/mrtony/c1ba5f8ec4122d2866b292fc36152d34

Answer 3

您的 radioInputGroup 值：

state = {
     gender: [
                {
                    id: 0,
                    type: "woman",
                    text: interpreter("ImFemale")
                }, {
                    id: 1,
                    type: "man",
                    text: interpreter("ImMale")
                }
        ]
}

还有你的验证架构：

ValidationSchema = Yup.object().shape({
    gender: Yup.boolean().required().oneOf([0 , 1]),
});

注意：您应该在 .onOf() 函数中使用性别值。

如果你想显示一些错误消息的味精，请使用此代码作为验证架构：

ValidationSchema = Yup.object().shape({
    gender: Yup.boolean().required().oneOf([0 , 1], 'Selecting the gender field is required'),
});

如何验证Yup / Formik中的无线电输入？

3 个答案: