Question

通过将一个字段的值与另一个字段的值进行比较来验证一个字段的正确语法是什么？我正在使用具有相当嵌套结构的Formik表单，并且已经准备好Codesandbox。

我试图在子组件中添加一个forwardRef，然后尝试通过父类中的useRef（）检索它，但是当试图将ref.current集中在父组件中时，我一直保持未定义状态。

Answer 1

只需添加一个validate函数（作为参数添加到useFormik函数中，或者作为prop添加到Formik组件中），就可以像这样实现它：

export default function validate(values) {

    const errors = {};

    if (values.field1 !== values.field2) {
        errors.field2 = 'field1 must match field2';
    }
    return errors;
};

Answer 2

您可能需要检索formik值以进行一些自定义验证

示例：

 {({ status, values, isValid, isSubmitting }) => (
    <Form>
      <SetOfFields doValidate={(inputValue) => validate(inputValue, values)} />
    </Form>
  )}

Answer 3

如果您想将一个字段的值与另一个字段的值进行比较，您可以使用 yup 验证架构中的 yup.ref() 来实现。例如，要检查 email_address_1 是否与 email_address_2 不同，您可以执行以下操作：

const validationSchema = yup.object().shape({
  email_address_1: yup.string().email().required(),
  email_address_2: yup.string().email()
    .optional().notOneOf([yup.ref("email_address_1")], "Must be a different email")
});

ReactJS，Formik-验证字段，将值与另一个值进行比较

3 个答案: