是的,对非必填字段进行验证

Posted

技术标签:

【中文标题】是的,对非必填字段进行验证【英文标题】:Yup validation for a non-required field 【发布时间】:2021-06-22 00:14:47 【问题描述】:

我的项目中有一个配置文件创建表单,我正在使用 react-hooks-form 和 yup 库进行验证。

在表单中有一个名为 Github-Username 的字段是可选的。但是如果用户输入用户名并且应该超过 2 个字符,我想验证它。

  const schema = yup.object().shape(
    company: yup.string().min(3).required(),
    website: yup.string(),
    location: yup.string().min(2).required(),
    skills: yup.string().min(3).required(),
    githubUsername: yup.string().min(3).nullable().notRequired(),
    bio: yup.string(),
  );

  const  register, handleSubmit, errors, touched  = useForm(
    resolver: yupResolver(schema),
  );

// 表单域

        <Form.Group controlId="formBasicGusername">
          <Form.Label>Github Username</Form.Label>
          <Form.Control
            type="text"
            name="githubUsername"
            ref=register
          />
          <span className="text-danger text-capitalize">
            errors.githubUsername?.message
          </span>
        </Form.Group>

这是我到目前为止编写的架构,它不适用于 githubUsername。如果它是空的,它会显示错误。我只想验证它不为空。有这方面的线索吗?

【问题讨论】:

【参考方案1】:

批准的答案是正确的,但缺少一些信息。您需要将循环依赖项添加到形状架构中

const schema = yup.object().shape(
    
        company: yup.string().min(3).required(),
        website: yup.string(),
        location: yup.string().min(2).required(),
        skills: yup.string().min(3).required(),
        githubUsername: yup
            .string()
            .nullable()
            .notRequired()
            .when('githubUsername', 
                is: (value) => value?.length,
                then: (rule) => rule.min(3),
            ),
        bio: yup.string(),
    ,
    [
        // Add Cyclic deps here because when require itself
        ['githubUsername', 'githubUsername'],
    ]
);

【讨论】:

这太完美了!【参考方案2】:
githubUsername: yup.string().nullable().notRequired().when('githubUsername', 
  is: value => value?.length,
  then: rule => rule.min(3),
)

【讨论】:

如果我使用这种语法,我得到一个错误:循环依赖。奇怪?(是的 v0.32.9)

以上是关于是的,对非必填字段进行验证的主要内容,如果未能解决你的问题,请参考以下文章

MVC4 JQuery validate 无法验证非必填字段

如何在非必填字段 JSR 303 上使用 @Pattern

prisma2:如何通过 prisma.user.findMany() 中的非必填字段进行过滤?

如何使用嵌套的“类型”属性在 Mongoose 模式中定义非必填字段?

access数据库里面字段设置可以为空值和非必填的方法

Laravel 5.6 空字段验证