reactjs Yup条件性确认

pgpifvop  于 2023-01-25  发布在  React
关注(0)|答案(7)|浏览(200)

我有一个电子邮件字段,只有当复选框被选中时才会显示(布尔值为true)。当表单被提交时,我只需要选中复选框(布尔值为真)。
这是我目前所尝试的:

const validationSchema = yup.object().shape({
   email: yup
         .string()
         .email()
         .label('Email')
         .when('showEmail', {
             is: true,
             then: yup.string().required('Must enter email address'),
         }),
    })

我尝试了其他几种变体,但Formik和Yup都出现了错误:

Uncaught (in promise) TypeError: Cannot read property 'length' of undefined
    at yupToFormErrors (formik.es6.js:6198)
    at formik.es6.js:5933
    at <anonymous>
yupToFormErrors @ formik.es6.js:6198

我也从Yup得到了验证错误。我做错了什么?

axr492tv

axr492tv1#

您可能没有为showEmail字段定义验证规则。
我已经做了一个CodeSandox测试出来,只要我补充说:

showEmail: yup.boolean()

表单已正确启动验证,未引发错误。
这是网址:https://codesandbox.io/s/74z4px0k8q
对于将来,这是正确的验证模式:

validationSchema={yup.object().shape({
    showEmail: yup.boolean(),
    email: yup
      .string()
      .email()
      .when("showEmail", {
        is: true,
        then: yup.string().required("Must enter email address")
      })
  })
}
qvtsj1bj

qvtsj1bj2#

我是福米克作家...
要使Yup.when正常工作,必须将showEmail添加到initialValues和Yup架构形状中。
通常,在使用validationSchema时,最佳实践是确保表单的所有字段都有初始值,以便Yup可以立即看到它们。
结果如下所示:

<Formik 
  initialValues={{ email: '', showEmail: false }}
  validationSchema={Yup.object().shape({
    showEmail: Yup.boolean(),
    email: Yup
      .string()
      .email()
      .when("showEmail", {
        is: true,
        then: Yup.string().required("Must enter email address")
      })
  })
}

/>
u4vypkhs

u4vypkhs3#

完全同意@João库尼亚的回答,只是对单选按钮用例的补充。
当我们使用单选按钮作为条件时,我们可以检查字符串值而不是布尔值。例如is: 'Phone'

const ValidationSchema = Yup.object().shape({
  // This is the radio button.
  preferredContact: Yup.string()
    .required('Preferred contact is required.'),
  // This is the input field.
  contactPhone: Yup.string()
    .when('preferredContact', {
      is: 'Phone',
      then: Yup.string()
        .required('Phone number is required.'),
    }),
  // This is another input field.
  contactEmail: Yup.string()
    .when('preferredContact', {
      is: 'Email',
      then: Yup.string()
        .email('Please use a valid email address.')
        .required('Email address is required.'),
    }),

});

这是用ReactJS编写的单选按钮,onChange方法是触发条件检查的关键。

<label>
  <input
    name="preferredContact" type="radio" value="Email"
    checked={this.state.preferredContact == 'Email'}
    onChange={() => this.handleRadioButtonChange('Email', setFieldValue)}
  />
  Email
</label>
<label>
  <input
    name="preferredContact" type="radio" value="Phone"
    checked={this.state.preferredContact == 'Phone'}
    onChange={() => this.handleRadioButtonChange('Phone', setFieldValue)}
  />
  Phone
</label>

这里是当单选按钮改变时的回调函数。如果我们使用Formik,这是应该做的。

handleRadioButtonChange(value, setFieldValue) {
  this.setState({'preferredContact': value});
  setFieldValue('preferredContact', value);
}
l5tcr1uw

l5tcr1uw4#

您甚至可以将函数用于复杂的情况。

validationSchema={yup.object().shape({
    showEmail: yup.boolean(),
    email: yup
      .string()
      .email()
      .when("showEmail", (showEmail, schema) => {
        if(showEmail)
          return schema.required("Must enter email address")
        return schema
      })
  })
}
vfhzx4xs

vfhzx4xs5#

email: Yup.string()
    .when(['showEmail', 'anotherField'], {
        is: (showEmail, anotherField) => {
            return (showEmail && anotherField);
        },
        then: Yup.string().required('Must enter email address')
    }),
af7jpaap

af7jpaap6#

这对我很有效:

Yup.object().shape({
    voyageStartDate:Yup.date(),
    voyageEndDate:Yup.date()
        .when(
            'voyageStartDate',
            (voyageStartDate, schema) => (moment(voyageStartDate).isValid() ? schema.min(voyageStartDate) : schema),
        ),
})
8ulbf1ek

8ulbf1ek7#

我将yup与vee-validate一起使用

验证
下面是来自project的示例代码

const schema = yup.object({
    first_name: yup.string().required().max(45).label('Name'),
    last_name: yup.string().required().max(45).label('Last name'),
    email: yup.string().email().required().max(255).label('Email'),
    self_user: yup.boolean(),
    company_id: yup.number()
        .when('self_user', {
            is: false,
            then: yup.number().required()
        })
})
const { validate, resetForm } = useForm({
    validationSchema: schema,
    initialValues: {
        self_user: true
    }
})

const {
    value: self_user
} = useField('self_user')
const handleSelfUserChange = () => {
    self_user.value = !self_user.value
}

相关问题