是的 dataURI 验证

Question

我的 Formik 形式（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() 动态 return 架构：https://github.com/jquense/yup/issues/647。如果 img_url 以 'data' 开头，则使用 Yup.string().matches() 的数据 URI 的 return 架构，否则，[=43= 的 return 架构] 与 Yup.string().url()

您可以找到关于数据 URI 正则表达式的要点和讨论 here

这应该有效：

  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'),
      )

是的 dataURI 验证

Yup dataURI validation

base64

yup