Next.js中Yup校验翻译的参数化实现方案问询

要实现翻译文本中数值的参数化，核心是利用Yup支持函数类型的校验消息，主动调用你的i18n翻译方法并传入参数。以下是具体实现步骤：

1. 统一维护长度常量（可选但推荐） #

把正则里的40提取成常量，避免后续修改时需要同时调整正则和翻译参数，提升可维护性：

export const FIRST_NAME_MAX_LENGTH = 40;
export const FIRST_NAME_REGEXP =
  new RegExp(
    `^(?!\\s)(?!.*\\s{3})(?!.*(http|www))(?!.*[&$=+#|{}()£[\\]<>?!:;@"%^*\\p{Extended_Pictographic}]).{1,${FIRST_NAME_MAX_LENGTH}}$`,
    'iu'
  );

2. 修改Yup的matches校验消息为函数 #

将原来的字符串翻译key替换成一个函数，在函数内部调用i18n的翻译方法，传入numChar参数：

import * as yup from 'yup';
import { t } from 'i18next'; // 根据你的i18n库调整引入方式

export const RegisterSchema = yup.object({
  firstName: yup
    .string()
    .required('register.invalid.first.name') // 若此处也需参数化，同样改为函数即可
    .matches(FIRST_NAME_REGEXP, () => 
      t('register.validation.first.name', { numChar: FIRST_NAME_MAX_LENGTH })
    )
});

3. 确保i18n配置正确 #

你的翻译文件已经修改为带占位符的格式，只需保证i18n实例已正确初始化，能正常加载翻译资源：

{"register.validation.first.name": "First name may contain letters, numbers, spaces and some punctuation characters only, and must not exceed {{numChar}} characters"}

特殊情况处理 #

如果遇到i18n初始化顺序问题（比如Schema文件加载时i18n还未完成初始化），可以使用Yup的lazy方法延迟创建Schema：

export const RegisterSchema = yup.lazy(() => yup.object({
  firstName: yup
    .string()
    .required(t('register.invalid.first.name'))
    .matches(FIRST_NAME_REGEXP, t('register.validation.first.name', { numChar: FIRST_NAME_MAX_LENGTH }))
}));

这种方式会在首次使用Schema时才执行创建逻辑，确保i18n已经准备就绪。

内容的提问来源于stack exchange，提问作者santilieb