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

Question

我正在使用 Yup 来验证我的 Formik 表单，但我不知道如何在 Yup/Formik 中验证无线电输入。

Answer 1

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

鉴于：

<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 2

理论上它不应该与任何其他值不同。您很可能正在您所在州的某处以字符串形式跟踪无线电值（或者 Formik 正在为您跟踪），并且您只需将规则应用于您正在存储的值即可。

如果您想确保该值仅与所提供的单选选项匹配，可以使用oneOf来完成此操作，但除此之外它与任何其他标量值没有什么不同。