如何在 React 中集中表單驗證？

Question

我想集中表單驗證。 我創建了一個文件： src/schemas/schemas.js 。

在這個文件中，我放置了所有表單驗證，例如：

export const schemaRegister = yup.object().shape({
  username: yup.string().required("Username is required").matches(/^[0-9a-z]+$/),
  password: yup.string().required("Password is required").min(8).otherValidations...,
  passwordConfirmation: yup.string()
    .required("Password confirmation is required")
    .oneOf([yup.ref("password"), null], "Passwords must match")
});

export const schemaLogin = yup.object().shape({
  username: yup.string().required("Username is required"),
  password: yup.string().required("Password is required").min(8).otherValidations...,
});

OTHER SCHEMAS

我有兩個疑問：

1. 可以將所有表單驗證模式放在一個文件（src/schemas/schemas.js）中嗎？

2. 如您所見，在這兩種模式中，我都在重復

   password: yup.string().required("Password is required").min(8).otherValidations...

有沒有辦法避免重復代碼？ 因為我有其他表單，有些字段的驗證比較復雜，所以就不再贅述了

Answer 1

你可以避免重復。 假設您想在schemaRegister中使用schemaLogin 。 您可以像這樣使用.shape合並這些模式：

const schemaRegister = schemaLogin.shape({
                       passwordConfirmation: yup.string()
                      .required("Password confirmation is required")
                      .oneOf([yup.ref("password"), null], "Passwords must match")
});