Yup dataURI验证

Question

我的表单(React)中有img字段，它可以是link或dataURI。

如何与Yup检查在字段中输入的有效值？

现在我用：

const validationSchema = Yup.object().shape({
    img_url: Yup.string().url(),
  });

但是，如果输入dataURI，则会出现错误。

Answer 1

无法将模式指定为两种类型中的一种：https://github.com/jquense/yup/issues/321

但是，您可以使用Yup.lazy()：https://github.com/jquense/yup/issues/647动态返回模式。如果img_url以' data‘开头，则使用Yup.string().matches()返回数据URI的模式，否则，返回带有Yup.string().url()的url模式

您可以找到关于数据URI regex 这里的要点和讨论。

这个应该能工作：

  const validationSchema = Yup.object().shape({
    img_url: Yup.lazy((value) =>
        /^data/.test(value)
          ? Yup.string()
              .trim()
              .matches(
                /^data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*)$/i,
                'Must be a valid data URI',
              )
              .required()
          : Yup.string().trim().url('Must be a valid URL').required(),
      ),
  });

注意:我添加了trim()，这样您就可以在URL或img_url的数据URI周围拥有额外的空白空间，从而仍然被认为是有效的。此外，我将img_url设置为必需的，这样如果为空，它就会被视为无效。根据您的用例，您可能希望或不希望这样做。

这里有一个没有trim()或required()的版本：

validationSchema={Yup.object({
      img_url: Yup.lazy((value) =>
        /^data/.test(value)
          ? Yup.string().matches(
              /^data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*)$/i,
              'Must be a valid data URI',
            )
          : Yup.string().url('Must be a valid URL'),
      )