# 最佳实践

URL: https://caijiao.org/yup/best-practices
Source: docs/yup/best-practices.md
Description: 总结在实际开发中使用 Yup 的技巧与注意事项。

在实际开发中使用 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` 实现
* 捕获全部错误提升用户体验