最佳实践

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

导入方式

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

1. 定义复用 Schema

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

const userSchema = object({
  name: nameSchema,
  age: ageSchema
});

• 将重复使用的字段验证抽离成单独 Schema
• 提高复用性和可读性

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

const emailSchema = string()
  .required('邮箱不能为空')
  .email('邮箱格式不正确')
  .max(50, '邮箱长度不能超过50');

• 链式调用直观
• 避免多次调用 validate

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

const usernameSchema = string().test('unique', '用户名已存在', async (value) => {
  return !(await checkUsernameExists(value));
});

• 异步验证适合远程校验
• Yup 自动处理 Promise，避免阻塞 UI

4. 使用 when 实现动态规则

const schema = object({
  age: number().required(),
  guardian: string().when('age', {
    is: (val) => val < 18,
    then: string().required('未成年必须填写监护人')
  })
});

• 避免写复杂的 if/else 校验逻辑
• Yup 提供灵活的条件验证

5. 捕获并显示错误信息

try {
  await userSchema.validate(data, { abortEarly: false });
} catch (err) {
  console.log(err.errors); // 显示所有错误
}

• 使用 abortEarly: false 捕获全部错误
• 有助于在表单中一次性显示所有验证问题

小结

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