表单验证解析器 🧩 #

resolver 属性允许您将任意第三方验证库与 rsuite <Form> 组件集成。您只需定义一个解析器函数，该函数接收当前表单值，并返回（或异步解析为）一个 { errors } 对象，其中每个键是字段名，每个值是错误信息。errors 为空对象时表示校验通过。

工作原理 #

import { Form } from 'rsuite';

// resolver 是一个函数（或返回函数的函数），它：
// 1. 接收当前表单值
// 2. 校验通过时返回 { errors: {} }
// 3. 校验失败时返回 { errors: { fieldName: '错误信息' } }

const myResolver = formValue => {
  const errors = {};
  if (!formValue.email) errors.email = '必填';
  return { errors };
};

<Form resolver={myResolver} onSubmit={handleSubmit}>
  <Form.Control name="email" />
  <Button type="submit">提交</Button>
</Form>

注意： resolver 属性在表单级校验上优先于 model 属性。如果 resolver 是异步的，请使用 checkAsync() 或依赖 onSubmit 回调（它总是等待 resolver 完成后才触发）。

演示 #

Yup #

Yup 是一个用于运行时值解析和验证的模式构建器。

Zod #

Zod 是一个以 TypeScript 为先、支持静态类型推断的模式验证库。

Joi #

Joi 是目前最强大的 JavaScript 数据验证库。

AJV #

AJV 是 Node.js 和浏览器中最快的 JSON Schema 验证器。

Superstruct #

Superstruct 让您轻松定义接口并对 JavaScript 数据进行验证。

Vest #

Vest 是一个受单元测试库启发的验证框架。

Valibot #

Valibot 是一个模块化、类型安全、体积极小的模式验证库。

class-validator #

class-validator 允许您在 TypeScript 类中使用基于装饰器的验证。

注意： class-validator 通常与 TypeScript 装饰器一起使用。此在线示例使用等价的 JavaScript 装饰器函数调用，以便可以在浏览器中运行。

io-ts #

io-ts 是一个用于 IO 解码/编码的运行时类型系统。

typanion #

typanion 是一个无依赖的类型安全验证库。

TypeBox #

TypeBox 提供了带 TypeScript 静态类型解析的 JSON Schema 类型构建器，与 AJV 配合使用效果极佳。

nope #

nope 是一个小巧、简单且快速的 JavaScript 验证器。