从JSON创建动态Yup验证架构 [英] Create dynamic Yup validation schema from JSON

问题描述

我正在尝试在我的反应形式中使用 Yup 和 Formik .表单字段将是动态的，以便对其进行验证.

I'm trying to use Yup along with Formik in my react form. The form fields are going to be dynamic so as their validations.

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 数组中.我尝试了一些方法 codesandbox ，但仍然无法解决.另外，我看着进入 Yup.lazy ，但对我来说似乎非常混乱.
• What I'm currently doing is iterating over the above array and calling the corresponding React form components.
• Validation is currently handled by Yup. I'm aware that you can create static Yup validation schema like above `validateSchema' variable.
• Now I want to create this validation schema depending upon the values in the formData.validation array. I tried some of the ways in this codesandbox but still unable to figure it out. Also, I looked into the Yup.lazy but it seems highly confusing to me.

任何帮助将不胜感激:)

Any help will be appreciated :)

代码框

推荐答案

以防有人尝试动态创建 yupschema .在一些帮助下，我得以做到.

In case someone is trying to create yupschema on the fly. With some help, I was able to do it.

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;
}

代码框

这篇关于从JSON创建动态Yup验证架构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！