javascript - 从 JSON 创建动态 Yup 验证模式
问题描述
我正在尝试在我的反应形式中使用Yup
with 。Formik
表单字段将是动态的,因此它们的验证。
export const formData = [
{
id: "name",
label: "Full name",
placeholder: "Enter full name",
type: "text",
required: true,
value: "User name",
values: [],
validations: [
{
type: "minLength",
value: "5",
error_message: "name should be atleast 5 char long"
},
{
type: "maxLength",
value: "10",
error_message: "name should be atleast 5 char long"
}
]
},
{
id: "email",
label: "Email",
placeholder: "Email",
type: "text",
required: true,
value: "email",
values: [],
validations: [
{
type: "minLength",
value: "5",
error_message: "name should be atleast 5 char long"
},
{
type: "maxLength",
value: "10",
error_message: "name should be atleast 5 char long"
},
{
type: "email",
error_message: "Valid email"
}
]
},
{
id: "phoneNumber",
label: "phone number",
type: "text",
required: true,
value: "7878787878",
values: [],
validations: [
{
type: "minLength",
value: "5",
error_message: "name should be atleast 5 char long"
},
{
type: "maxLength",
value: "10",
error_message: "name should be atleast 5 char long"
},
{
type: "required",
error_message: "phone number is required"
}
]
},
{
id: "total",
label: "Total People in Family",
placeholder: "family members count",
type: "text",
required: false,
value: "1",
values: [],
validations: [
{
type: "minLength",
value: "1",
error_message: "there should be atleast 1 family member"
},
{
type: "maxLength",
value: "5",
error_message: "max family members can be 5"
}
]
}
]
let validateSchema = yup.object().shape({
name: yup.string().required("name is required"),
email: yup.string().email(),
phoneNumber: yup.number().min(10, "minium 10 numbers"),
total: yup
.number()
.min(1, "minium 1 member")
.max(5, "max 5 member")
.required("member is required") });
- 我目前正在做的是遍历上述数组并调用相应的 React 表单组件。
- 验证当前由
Yup
. 我知道您可以像上面的“validateSchema”变量一样创建静态 Yup 验证模式。 - 现在我想根据
formData.validation
数组中的值创建这个验证模式。我尝试了这个 codeandbox中的一些方法,但仍然无法弄清楚。另外,我调查了Yup.lazy
但对我来说似乎非常混乱。
任何帮助将不胜感激 :)
解决方案
以防有人试图yupschema
即时创建。在一些帮助下,我能够做到。
import * as yup from "yup";
export function createYupSchema(schema, config) {
const { id, validationType, validations = [] } = config;
if (!yup[validationType]) {
return schema;
}
let validator = yup[validationType]();
validations.forEach(validation => {
const { params, type } = validation;
if (!validator[type]) {
return;
}
console.log(type, params);
validator = validator[type](...params);
});
schema[id] = validator;
return schema;
}
推荐阅读
- setuptools - PyPI打包、命名空间包和子打包问题
- javascript - 在客户端的浏览器中打开(由 http get 产生的)PDF
- linux - Pthreads 和 QT
- ios - 使用 FCM 推送通知不工作 iOS
- python - 启动两个 cpu 阻塞侦听器并等待其中一个完成
- python - 将任何 YAML 文件转换为 Ansible 清单
- google-chrome - Chrome 命令 API 浏览器后退/前进快捷键?
- postgresql - 如何在 postgresql 中写 where 条件?
- html - 在卡片上添加不透明度,但在图标上禁用它
- c# - 在c#中处理大量内存列表时如何避免垃圾排序问题