菜鸟教程
教程 yup tutorial

错误处理

Yup 提供详细的错误信息机制，方便开发者捕获、显示和调试验证失败的结果。

导入方式

js 
import { object, string, number } from 'yup';

`

捕获验证错误

js 
const schema = object({
  name: string().required('姓名不能为空'),
  age: number().required('年龄不能为空').positive('年龄必须为正数')
});

schema.validate({ name: '', age: -5 })
  .catch(err => {
    console.log(err.errors); // ["姓名不能为空", "年龄必须为正数"]
  });
  • err.errors：数组形式，包含所有验证失败信息
  • err.path：出错字段路径
  • err.message：单条错误信息（通常为第一个错误）

捕获同步验证错误

js 
try {
  schema.validateSync({ name: '', age: -5 });
} catch (err) {
  console.log(err.errors);
}
  • validateSync 用于同步验证
  • 异常对象同样包含 errors、path、message

自定义错误信息

js 
const schema = string()
  .required('字段不能为空')
  .min(3, '最少 3 个字符')
  .matches(/^[a-z]+$/, '只能包含小写字母');
  • Yup 支持为每个规则指定自定义错误信息
  • 也可在 test 方法中自定义错误提示

小结

  • Yup 错误信息详细且可自定义
  • 可以获取全部错误数组或单条错误信息
  • 适合在表单中显示给用户或调试数据验证问题

相关内容