菜鸟教程
教程 yup tutorial

最佳实践

在实际开发中使用 Yup，可以遵循一些最佳实践，提高代码可维护性和验证效率。

导入方式

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

`

1. 定义复用 Schema

js 
const nameSchema = string().required('姓名不能为空');
const ageSchema = number().required('年龄不能为空').positive().integer();

const userSchema = object({
  name: nameSchema,
  age: ageSchema
});
  • 将重复使用的字段验证抽离成单独 Schema
  • 提高复用性和可读性

2. 使用链式调用清晰规则

js 
const emailSchema = string()
  .required('邮箱不能为空')
  .email('邮箱格式不正确')
  .max(50, '邮箱长度不能超过50');
  • 链式调用直观
  • 避免多次调用 validate

3. 尽量使用异步验证处理远程校验

js 
const usernameSchema = string().test('unique', '用户名已存在', async (value) => {
  return !(await checkUsernameExists(value));
});
  • 异步验证适合远程校验
  • Yup 自动处理 Promise，避免阻塞 UI

4. 使用 when 实现动态规则

js 
const schema = object({
  age: number().required(),
  guardian: string().when('age', {
    is: (val) => val < 18,
    then: string().required('未成年必须填写监护人')
  })
});
  • 避免写复杂的 if/else 校验逻辑
  • Yup 提供灵活的条件验证

5. 捕获并显示错误信息

js 
try {
  await userSchema.validate(data, { abortEarly: false });
} catch (err) {
  console.log(err.errors); // 显示所有错误
}
  • 使用 abortEarly: false 捕获全部错误
  • 有助于在表单中一次性显示所有验证问题

小结

  • 抽离复用 Schema
  • 链式调用清晰直观
  • 异步验证处理远程校验
  • 动态规则用 when 实现
  • 捕获全部错误提升用户体验

相关内容