我在 React Formik 表單中有 3 個下拉選單，每個下拉選單都有相同的選項集。我想使用 YUP 提供一些自定義驗證，以確保這些下拉選單中的每一個都選擇了唯一的值。
在每個欄位上設定的 Formik 值采用 {id: somevalue, text: someText } 的形狀
我試過如下設定我的驗證物件：
const { values } = useFormikContext();
const validation = Yup.object({
picker1: Yup.object()
.test('test-name', 'Value must be Unique',
function (value) {
return !((values["picker2"] && values["picker2"].id === value.id) ||
(values["picker3"] && values["picker3"].id === value.id));
}),
... repeat for other pickers
})
我遇到的問題是，當測驗函式執行時，選擇器的 formik 值始終為空，大概是因為 values 的值范圍限定為創建函式時。有沒有更好的方法來嘗試這個，因為 YUP 中關于自定義驗證的檔案似乎有點稀疏。
uj5u.com熱心網友回復：
因此，我設法不使用 Formik 背景關系而是在其測驗方法中使用 using Yup 物件來解決此問題。
const validation = Yup.object(){
picker1: Yup.object()
.shape({
id: Yup.string().required(),
text: Yup.string().required()
})
.nullable()
.test(
'unique-values',
'Selected picker values must all be different',
(data, { parent }) => {
return (
data
&& (parent.picker2 == null || (parent.picker2 != null && data.id !== parent.picker2.id))
&& (parent.picker3 == null || (parent.picker3 != null && data.id !== parent.picker3.id))
)
}
),
picker2: Yup.object()
.shape({
id: Yup.string().required(),
text: Yup.string().required()
})
.nullable()
.test(
'unique-values',
'Selected picker values must all be different',
(data, { parent }) => {
return (
data
&& (parent.picker1 == null || (parent.picker1 != null && data.id !== parent.picker1.id))
&& (parent.picker3 == null || (parent.picker3 != null && data.id !== parent.picker3.id))
}
),
picker3: Yup.object()
.shape({
id: Yup.string().required(),
text: Yup.string().required()
})
.nullable()
.test(
'unique-values',
'Selected picker values must all be different',
(data, { parent }) => {
return (
data
&& (parent.picker1 == null || (parent.picker1 != null && data.id !== parent.picker1.value))
&& (parent.picker2 == null || (parent.picker2 != null && data.id !== parent.picker2.id))
)
}
)
};
顯然，那里有很多重復的代碼，它不是最優雅的。會對任何其他解決方案非常感興趣。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/347471.html
上一篇：十進制數的Joi驗證無法正常作業
下一篇：在Android中拍照后驗證按鈕