前端使用Joi包无法触发自定义错误消息问题排查

你在验证单个字段时犯了一个关键错误：提取单个字段的Schema后，你传入了一个对象进行验证，但该Schema期望的是原始字符串值。

看你的validateField函数：

const { error } = schema.validate(
  { email: data[field] }, // 这里传了对象，但schema是单个string类型的规则
  { abortEarly: false }
);

loginSchema.extract(field)拿到的是对应字段的独立Schema（比如email字段的Joi.string()规则），它只能验证单个字符串值，而你传入了{email: "xxx"}这样的对象，Joi自然会报错说"value必须是字符串"，根本没走到你的pattern和email验证逻辑。

修改validateField函数，直接传入字段的原始值：

const validateField = (field) => {
  const value = form[field];
  const schema = loginSchema.extract(field);
  const { error } = schema.validate(value, { abortEarly: false });

  errors[field] = error ? error.details[0].message : null;
};

• 你之前定义的data变量完全可以去掉，直接用form[field]获取值即可。
• 注意你正则里的[domainName]是字面量匹配，如果你想匹配实际域名（比如example），需要改成具体域名或者用变量替换，比如：

const domain = "example";
.pattern(new RegExp(`^[^@\\s]+@${domain}\\.(com|in)$`))

否则正则会要求邮箱里必须包含[domainName]这个字符串，可能不符合你的实际需求。

内容的提问来源于stack exchange，提问作者Nishant S Vispute