使用 Yup 进行表单验证以检查输入值是否相等

Question

我需要使用烨做一个表单验证检查输入类型email1，email2，email3，email4和email5在我的应用程序作出反应。

经验法则很简单。检查这些emails格式是否有效，并且不能具有相似的emails值。

我对是的超级新手。所以我所做的是：

const message = 'Duplicate emails not allowed';
const incorrect = 'Incorrect email format';

const Schema = Yup.object().shape({
  email1: Yup.string()
    .email(incorrect)
    .oneOf([Yup.ref('email2'), null], message)
    .oneOf([Yup.ref('email3'), null], message)
    .oneOf([Yup.ref('email4'), null], message)
    .oneOf([Yup.ref('email5'), null], message),
  email2: Yup.string()
    .email(incorrect)
    .oneOf([Yup.ref('email1'), null], message)
    .oneOf([Yup.ref('email3'), null], message) 
    .oneOf([Yup.ref('email4'), null], message)
    .oneOf([Yup.ref('email5'), null], message),
  email3: Yup.string()
    .email(incorrect)
    .oneOf([Yup.ref('email1'), null], message)
    .oneOf([Yup.ref('email2'), null], message)
    .oneOf([Yup.ref('email4'), null], message)
    .oneOf([Yup.ref('email5'), null], message),
  email4: Yup.string()
    .email(incorrect)
    .oneOf([Yup.ref('email1'), null], message)
    .oneOf([Yup.ref('email2'), null], message)
    .oneOf([Yup.ref('email3'), null], message)
    .oneOf([Yup.ref('email5'), null], message),
  email5: Yup.string()
    .email(incorrect)
    .oneOf([Yup.ref('email1'), null], message)
    .oneOf([Yup.ref('email2'), null], message)
    .oneOf([Yup.ref('email3'), null], message)
    .oneOf([Yup.ref('email4'), null], message)
});

这种方法的问题是，即使输入文本为空，它也会检测到重复电子邮件的错误。我该如何解决？有没有更好的方法可以实现？

谢谢

Answer 1

使用 notOneOf 代替 oneOf

你必须在这个结构中使用

const ValidationSchema=Yup.object().shape({email1: Yup.string().email(this.incorrect)
  .notOneOf(
    [
      Yup.ref('email2'),
      Yup.ref('email3'),
      Yup.ref('email4'),
      Yup.ref('email5')
    ],
    this.message
  ),

email2: Yup.string()
  .email(this.incorrect)
  .notOneOf(
    [
      Yup.ref('email1'),
      Yup.ref('email3'),
      Yup.ref('email4'),
      Yup.ref('email5')
    ],
    this.message
  ),
email3: Yup.string()
  .email(this.incorrect)
  .notOneOf(
    [
      Yup.ref('email1'),
      Yup.ref('email2'),
      Yup.ref('email4'),
      Yup.ref('email5')
    ],
    this.message
  ),

email4: Yup.string()
  .email(this.incorrect)
  .notOneOf(
    [
      Yup.ref('email1'),
      Yup.ref('email2'),
      Yup.ref('email3'),
      Yup.ref('email5')
    ],
    this.message
  ),
email5: Yup.string()
  .email(this.incorrect)
  .notOneOf(
    [
      Yup.ref('email1'),
      Yup.ref('email2'),
      Yup.ref('email3'),
      Yup.ref('email4')
    ],
    this.message
  )});