|
1 | | -# @rc-component/async-validator |
2 | | - |
3 | | -[![NPM version][npm-image]][npm-url] |
4 | | -[![npm download][download-image]][download-url] |
5 | | -[![build status][github-actions-image]][github-actions-url] |
6 | | -[![Codecov][codecov-image]][codecov-url] |
7 | | -[![dumi][dumi-image]][dumi-url] |
8 | | - |
9 | | -[npm-image]: http://img.shields.io/npm/v/@rc-component/async-validator.svg?style=flat-square |
10 | | -[npm-url]: http://npmjs.org/package/@rc-component/async-validator |
11 | | -[travis-image]: https://img.shields.io/travis/react-component/async-validator/master?style=flat-square |
12 | | -[travis-url]: https://travis-ci.com/react-component/async-validator |
13 | | -[github-actions-image]: https://github.com/react-component/async-validator/actions/workflows/ci.yml/badge.svg |
14 | | -[github-actions-url]: https://github.com/react-component/async-validator/actions/workflows/ci.yml |
15 | | -[codecov-image]: https://img.shields.io/codecov/c/github/react-component/async-validator/master.svg?style=flat-square |
16 | | -[codecov-url]: https://app.codecov.io/gh/react-component/async-validator |
17 | | -[david-url]: https://david-dm.org/react-component/async-validator |
18 | | -[david-image]: https://david-dm.org/react-component/async-validator/status.svg?style=flat-square |
19 | | -[david-dev-url]: https://david-dm.org/react-component/async-validator?type=dev |
20 | | -[david-dev-image]: https://david-dm.org/react-component/async-validator/dev-status.svg?style=flat-square |
21 | | -[download-image]: https://img.shields.io/npm/dm/@rc-component/async-validator.svg?style=flat-square |
22 | | -[download-url]: https://npmjs.org/package/@rc-component/async-validator |
23 | | -[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/async-validator |
24 | | -[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/async-validator |
25 | | -[dumi-url]: https://github.com/umijs/dumi |
26 | | -[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square |
27 | | - |
28 | | -Validate form asynchronous. A variation of https://github.com/freeformsystems/async-validate |
| 1 | +<div align="center"> |
| 2 | + <h1>@rc-component/async-validator</h1> |
| 3 | + <p><sub><a href="https://ant.design"><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /></a> Part of the Ant Design ecosystem.</sub></p> |
| 4 | + <p>✅ Async validation engine for schema-based form rules.</p> |
| 5 | + |
| 6 | + <p> |
| 7 | + <a href="https://npmjs.org/package/@rc-component/async-validator"><img alt="NPM version" src="https://img.shields.io/npm/v/@rc-component/async-validator.svg?style=flat-square"></a> |
| 8 | + <a href="https://npmjs.org/package/@rc-component/async-validator"><img alt="npm downloads" src="https://img.shields.io/npm/dm/@rc-component/async-validator.svg?style=flat-square"></a> |
| 9 | + <a href="https://github.com/react-component/async-validator/actions/workflows/test.yml"><img alt="build status" src="https://github.com/react-component/async-validator/actions/workflows/test.yml/badge.svg"></a> |
| 10 | + <a href="https://app.codecov.io/gh/react-component/async-validator"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/react-component/async-validator/master.svg?style=flat-square"></a> |
| 11 | + <a href="https://bundlephobia.com/package/@rc-component/async-validator"><img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/@rc-component/async-validator?style=flat-square"></a> |
| 12 | + <a href="https://github.com/umijs/dumi"><img alt="dumi" src="https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square"></a> |
| 13 | + </p> |
| 14 | +</div> |
| 15 | + |
| 16 | +<p align="center">English | [简体中文](./README.zh-CN.md)</p> |
| 17 | + |
| 18 | +## Highlights |
| 19 | + |
| 20 | +| Area | Support | |
| 21 | +| ------- | ---------------------------------------------------- | |
| 22 | +| Purpose | Async validation engine for schema-based form rules. | |
| 23 | +| Package | `@rc-component/async-validator` | |
| 24 | +| Release | `@rc-component/np` / `rc-np` | |
29 | 25 |
|
30 | 26 | ## Install |
31 | 27 |
|
32 | 28 | ```bash |
33 | | -npm i @rc-component/async-validator |
| 29 | +npm install @rc-component/async-validator |
34 | 30 | ``` |
35 | 31 |
|
36 | 32 | ## Usage |
37 | 33 |
|
38 | | -Basic usage involves defining a descriptor, assigning it to a schema and passing the object to be validated and a callback function to the `validate` method of the schema: |
39 | | - |
40 | | -```js |
| 34 | +```tsx | pure |
41 | 35 | import Schema from '@rc-component/async-validator'; |
42 | | -const descriptor = { |
43 | | - name: { |
44 | | - type: 'string', |
45 | | - required: true, |
46 | | - validator: (rule, value) => value === 'muji', |
47 | | - }, |
48 | | - age: { |
49 | | - type: 'number', |
50 | | - asyncValidator: (rule, value) => { |
51 | | - return new Promise((resolve, reject) => { |
52 | | - if (value < 18) { |
53 | | - reject('too young'); // reject with error message |
54 | | - } else { |
55 | | - resolve(); |
56 | | - } |
57 | | - }); |
58 | | - }, |
59 | | - }, |
60 | | -}; |
61 | | -const validator = new Schema(descriptor); |
62 | | -validator.validate({ name: 'muji' }, (errors, fields) => { |
63 | | - if (errors) { |
64 | | - // validation failed, errors is an array of all errors |
65 | | - // fields is an object keyed by field name with an array of |
66 | | - // errors per field |
67 | | - return handleErrors(errors, fields); |
68 | | - } |
| 36 | + |
| 37 | +const validator = new Schema({ |
| 38 | + name: { type: 'string', required: true }, |
| 39 | +}); |
| 40 | + |
| 41 | +validator.validate({ name: 'Ant Design' }).then(() => { |
69 | 42 | // validation passed |
70 | 43 | }); |
| 44 | +``` |
71 | 45 |
|
72 | | -// PROMISE USAGE |
73 | | -validator |
74 | | - .validate({ name: 'muji', age: 16 }) |
75 | | - .then(() => { |
76 | | - // validation passed or without error message |
77 | | - }) |
78 | | - .catch(({ errors, fields }) => { |
79 | | - return handleErrors(errors, fields); |
80 | | - }); |
| 46 | +## API |
| 47 | + |
| 48 | +| API | Description | |
| 49 | +| --------------------------------------- | ------------------------------------------ | |
| 50 | +| `new Schema(descriptor)` | Create a validator from a rule descriptor. | |
| 51 | +| `validate(source, options?, callback?)` | Validate source data and return a Promise. | |
| 52 | +| `messages` | Customize validation messages. | |
| 53 | + |
| 54 | +## Development |
| 55 | + |
| 56 | +```bash |
| 57 | +npm install |
| 58 | +npm start |
| 59 | +npm test |
| 60 | +npm run coverage |
| 61 | +npm run lint |
| 62 | +npm run tsc |
| 63 | +npm run compile |
| 64 | +``` |
| 65 | + |
| 66 | +The dumi site runs at `http://localhost:8000`. |
| 67 | + |
| 68 | +## Release |
| 69 | + |
| 70 | +```bash |
| 71 | +npm run prepublishOnly |
81 | 72 | ``` |
82 | 73 |
|
| 74 | +The release flow is handled by `@rc-component/np` through the `rc-np` command when the package uses the shared release flow. |
| 75 | + |
| 76 | +## Detailed API |
| 77 | + |
83 | 78 | ## API |
84 | 79 |
|
85 | 80 | ### Validate |
@@ -478,4 +473,4 @@ Open coverage/ dir |
478 | 473 |
|
479 | 474 | ## License |
480 | 475 |
|
481 | | -Everything is [MIT](https://en.wikipedia.org/wiki/MIT_License). |
| 476 | +@rc-component/async-validator is released under the [MIT](./LICENSE.md) license. |
0 commit comments