如何使用 Yup 动态验证表单？答案

【问题标题】：How to dynamically validate a form with Yup?如何使用 Yup 动态验证表单？
【发布时间】：2021-12-20 22:18:45
【问题描述】：

我得到一个具有随机属性（键）的对象，我想验证，这是我能得到的一个例子：

{
    "underlying_ticker": "",
    "barrier": "",
    "fixing_date": "3223",
    "maturity_date": "2323",
    "payment_date": "2332",
    "put_barrier": "2323",
    "put_strike": "3232",
    "quantity": "2323",
    "strike": "32"
}

我想知道如何验证它们以了解它们是否已填充等等。

我尝试了以下代码：

  const validateForm = async (data) => {
    try {
      parametersFormRef.current.setErrors({});

      const shapes = Object.keys(data).map(((parameter) => {
        return ({ [parameter]: Yup.string().typeError("Test").required() });
      }));

      const schema = Yup.object().shape({ ...shapes });

      await schema.validate(data, { abortEarly: false });
    } catch (err) {
      console.error(err);
      const validationErrors = {};

      if (err instanceof Yup.ValidationError) {
        err.inner.forEach((error) => {
          validationErrors[error.path] = error.message;
        });
      }
    }
  };

但是，即使有两个空值，它也不会陷入困境。

【问题讨论】：

标签： reactjs yup

【解决方案1】：

    const schema = Yup.lazy((value) => {
       const shapes = {};
       const DATA_OBJ_KEYS = Object.keys(value);
    
       DATA_OBJ_KEYS.forEach(((parameter) => {
         shapes[parameter] = Yup.string().required('Campo Obrigatório');
        }));
    
        return Yup.object().shape(shapes);
     });

【讨论】：