reactjs - 如何使用 yup.addMethod() 为国家/地区名称和代码编写自定义架构验证？

Question

我正在尝试使用 yup 添加表单验证使用 formik 到 React 表单组件.我的验证似乎有效，但我觉得它太冗长了。
尝试使用 .addMethod() yup 的功能，但是被语法困住了，或者这可能是矫枉过正？
摘要:我想使用 yup.addMethod() 将我的验证转换为实际方法。 .
实际验证:

import * as yup from 'yup'

const countryNameRegex = /[A-Za-z]/g;
const countryCodeRegex = /[a-zA-Z]{2,}/g;
const isRequired = 'Required Field'
const isCorrectFormat = 'The country name may contain only letters'

const countryValidationSchema = yup.object().shape({
  name: yup.string()
    .min(3, `country name must contain at least 3 characters`)
    .matches(
      countryNameRegex,
      {
        message: isCorrectFormat,
        excludeEmptyStrings: true
      }
    )
    .label(`Country Name`)
    .required(isRequired),
  code: yup.string()
    .length(2, `The country code must be exactly 2 letters`)
    .matches(
      countryCodeRegex,
      { 
        message: isCorrectFormat,
        excludeEmptyStrings: true
      }
    )
    .label('Country Code')
    .required(isRequired),
});

export default countryValidationSchema;

我使用 yup.addMethod() 的试用

function isValidCountryName(ref, msg) {
  return yup.mixed().test({
    name: 'isValidCountry',
    exclusive: false,
    message: msg || `${ref.path} must be a valid country name`,
    params: {
      reference: ref.path,
    },
    test(value) {
     const isRightFormat = this.resolve(ref);
     return isRightFormat; [//ASK] should be doing the checks or transformations here
    },
  });
}

yup.addMethod(yup.string, 'isValidCountryName', isValidCountryName)

Answer 1

你有两种方法可以做到这一点:

使用 yup的内置方法:

// Using built-in methods
function isValidCountry1() {
  return this.min(3, TOO_SMALL_ERROR_MESSAGE)
    .matches(COUNTRY_NAME_REGEX, {
      message: INVALID_FORMAT_ERROR_MESSAGE,
      excludeEmptyStrings: true
    })
    .required(REQUIRED_ERROR_MESSAGE);
}
yup.addMethod(yup.string, "isValidCountry1", isValidCountry1);

使用自定义 test功能:

// Using custom test method
function isValidCountry2(message) {
  return this.test("isValidCountry", message, function (value) {
    const { path, createError } = this;

    if (!value) {
      return createError({ path, message: message ?? REQUIRED_ERROR_MESSAGE });
    }

    if (value.length < 3) {
      return createError({ path, message: message ?? TOO_SMALL_ERROR_MESSAGE });
    }

    if (!value.match(COUNTRY_NAME_REGEX)) {
      return createError({
        path,
        message: message ?? INVALID_FORMAT_ERROR_MESSAGE
      });
    }

    return true;
  });
}
yup.addMethod(yup.mixed, "isValidCountry2", isValidCountry2);

添加方法后，您可以在验证架构中使用它们:

const validationSchema = yup.object().shape({
  country1: yup.string().isValidCountry1(),
  country2: yup.mixed().isValidCountry2(),
  country3: yup.mixed().isValidCountry2("Country format is invalid.")
});

这是 DEMO .