使用 Yup 对多个字段进行条件验证

Question

我有 3 个输入字段（姓名、ID 和邮政编码），我使用 formik 和 Yup 进行验证。

我想在这里实现的是，我想将每个输入字段与已知的名称、id 和邮政编码组合匹配（我有一个预定义的 id、名称、邮政编码的默认值）。

如果在所有 3 个输入字段中输入的值与名称、id 和邮政编码的默认值完全匹配，那么我必须在每个字段上显示 formik 错误（*不允许默认值）。如果这些字段之一与默认值不同，请不要在任何字段上显示错误。

例如，如果我的每个字段的默认值为 name="testName"、id="testID"、postCode="testPostCode"，则在每个字段上显示验证错误仅在 所有 3 个输入值都与 defaultValues 匹配。

这就是我现在所拥有的：

const defaultValues = {
  name: 'testName',
  id: 'testID',
  postCode: 'testPostCode'
}

const YUP_STRING = Yup.string().ensure().trim();

const validationSchema = yup.object().shape({
   name: YUP_STRING.required('required'),
   id: YUP_STRING.required('required'),
   postcode: YUP_STRING.required('required'),
})

我尝试了几种变体，但这里没有任何效果。谁能帮我找到解决方案？

Answer 1

你可以做类似 <Field validate={(value)=>validate(value,values)} name="name" type="text" />

更详细..

<Formik
     initialValues={defaultValues}
     onSubmit={values => alert(JSON.stringify(values)}
   >
     {({ errors, touched, values }) => (
       <Form>
         <Field validate={(value) => validate(value, values)} name="name" type="text" />
         {errors.name && touched.name ? <div>{errors.name}</div> : null}
         <button type="submit">Submit</button>
       </Form>
     )}
</Formik>

并将验证函数定义为

const validate = (value, values) => {
  if(values === defaultValues){
    return "Default Values not allowed"
  } else return undefined
}

或者如果你想用validationSchema来做，你可以通过在每个字段上添加test函数来做一些事情，我只为名字做了：

const validationSchema = yup.object().shape({
   name: YUP_STRING.required('required')
         .test('name', "No default please", function (item) {
                   const currentValues = {
                       name: this.parent.name,
                       id: this.parent.id,
                       postCode: this.parent.postCode
                     }
                   return !(currentValues === defaultValues)
              }
          ),
   id: YUP_STRING.required('required'),
   postcode: YUP_STRING.required('required'),
})

没有箭头功能可以使用this