我的项目中有一个配置文件创建表单，我正在使用 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。如果它是空的，它会显示错误。我只想在它不为空时进行验证。这有什么线索吗？

回答

githubUsername: yup.string().nullable().notRequired().when('githubUsername', {
  is: value => value?.length,
  then: rule => rule.min(3),
})