教程 yup tutorial

基本使用

Yup 的核心思想是通过 Schema(模式) 定义数据结构和验证规则。
通过链式调用,你可以直观地为字段添加限制条件。

定义 Schema

一个最简单的示例:

js
import * as yup from "yup";

const schema = yup.object({
  name: yup.string().required(),
  age: yup.number().required().positive().integer(),
});

`

这里我们定义了一个对象,其中:

  • name 必须是字符串,且不能为空
  • age 必须是正整数

验证数据

使用 schema.validate 方法可以验证数据:

js
schema
  .validate({ name: "Alice", age: 25 })
  .then(() => {
    console.log("验证通过");
  })
  .catch((err) => {
    console.log("验证失败:", err.errors);
  });

同步与异步

  • 异步验证(默认) Yup 会返回一个 Promise,适合处理异步逻辑。
  • 同步验证 如果希望立即得到结果,可以使用 validateSync:
js
try {
  schema.validateSync({ name: "", age: -5 });
} catch (err) {
  console.log(err.errors);
}

小结

  • Yup 使用链式调用定义规则
  • validate 支持 Promise 异步验证
  • validateSync 可进行同步校验