reactjs - 如何验证 yup 的非必需文件

Question

我正在使用 yup 和 formik 进行验证。我想用是的来验证一个非必填字段。这里的 test 是一个非必填字段，但是当用户输入时，我们会阻止他输入一些特殊字符。当用户没有输入任何内容时，它也在验证（在用户输入内容之前我不需要此验证）。任何人都可以帮助我，提前谢谢

   const validationSchema = function (values) {
    return Yup.object().shape({
       test: Yup.string()
      .matches(/^[^<&>`#]+$/,'test should not contain `, &, #, <, > \n')
    })
  }

Answer 1

结合errors.yourFieldName并touched.yourFieldName解决您的问题：

因此，如果您的输入字段的名称是test显示/隐藏错误：

{errors.test && touched.test ? {errors.test}: 'Valid form'}

并启用/禁用您的提交按钮：

<button disabled={touched.test && (!isValid || isSubmitting)}>

我在这里创建了一个简单的演示来说明这一点https://codesandbox.io/s/q8vz32mpw