是的 dataURI 验证

Question

我的 Formik 表单（React）中有 img 字段，它可以是链接或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 正则表达式的要点和讨论

这应该有效：

  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 或数据 URI 周围添加额外的空格，以使 img_url 仍然被视为有效。另外，我将 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'),
      )