如何使用Yup实现下拉选择器仅接受US、UGX两个指定值的校验

Yup 内置的 oneOf 方法可直接实现字段值必须属于指定枚举列表的校验需求，你只需要在原有校验规则基础上追加该方法即可。

修改后的校验代码 #

const signUpSchema = Yup.object().shape({
    countrySelector: Yup.string()
        .required('Please select the country')
        // 第一个参数为允许的取值数组，第二个参数为校验不通过时的自定义报错提示
        .oneOf(['US', 'UGX'], '仅允许选择 US 或 UGX')
});

规则说明 #

• 配置完成后，若用户选择了 -、DE 等不在允许范围内的值，会直接触发校验失败，抛出你指定的错误提示
• 如果需要从交互层面减少用户误操作，可直接修改JSX的下拉选项，移除非法选项即可，参考代码如下：

<Formik
    validationSchema={signUpSchema}
    onSubmit={handleSignUpAsync}
    initialValues={{
        countrySelector: ''
    }}
>
    <Form>
        <Field
            as="select"
            className="browser-default custom-select"
            name='countrySelector'
        >
            <option value="">请选择国家</option>
            <option value="US">US</option>
            <option value="UGX">UGX</option>
        </Field>
    </Form>
</Formik>

内容的提问来源于stack exchange，提问作者Lutaaya Huzaifah Idris