基于动态数据数组的条件规则Yup验证

Question

我有一个数据数组，如下所示：

{
"fields": [
{
"id": 1,
"name": "My Field 1",
"type": "textbox",
"isRequired": true
},
{
"id": 2,
"name": "My Field 2",
"type": "email",
"isRequired": true
},
{
"id": 3,
"name": "My Field 3",
"type": "select",
"options": [
{
"name": "One",
"value": 1
},
{
"name": "Two",
"value": 2
},
{
"name": "Three",
"value": 3
}
],
"isRequired": false
},
{
"id": 4,
"name": "My Field 4",
"type": "number",
"isRequired": false,
"min": 3,
"max": 10
},,
{
"id": 5,
"name": "My Field 5",
"type": "checkbox",
"isRequired": false
},
]
}

如何调整验证，使动态数组中的每个字段都使用动态fields数组中定义的验证规则？

• 如果字段具有type: "email"，则我需要使用.email()
• 如果字段具有type: "number"，则我需要使用min/max属性中的.number()和.min().max()，否则，请使用.string()
• 如果字段有isRequired: true，那么我需要使用.required()

const validationSchema = Yup.object()
.shape({
fields: Yup.array()
.of(
Yup.object()
.shape({

}),
)
})

最终的伪HTML输出应该是：

<form>
<input type="text" name="My Field 1" /> <!-- checks for required value -->
<input type="text" name="My Field 2" /> <!-- checks for required value and valid email -->
<select name="My Field 3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="text" name="My Field 4" /> <!-- checks valid # and min 3 and max 10 -->
<input type="checkbox" name="My Field 5" />
</form>

Answer 1

我们也遇到了一个与您的问题非常相似的问题，我们发现了一个名为jsonschema的优秀包。我们能够拥有一个翻译器服务，该服务将从API解析JSON，并将其格式化为兼容的JSON，我们可以通过该包运行该JSON，并生成Yup验证对象。

当涉及到条件规则时，您需要使用Yup的When条件。该软件包也支持