异步校验

表单经常会存在异步校验。大概有以下3种场景

1. 点击按钮触发异步校验
2. 表单数据改变，触发异步校验
3. 表单提交时，统一触发异步校验

我们看下下面的 gif 动画

通常接口校验可以封装在自定义组件内部。但为了提高表单的复用性¹，Drip Form 默认提供两种方式去配置不同的表单的异步校验。

什么时候不推荐使用 Drip Form 提供的异步校验配置功能

• 对表单的ui有强要求
• 校验接口不存在变化性
• 希望是一个单独的表单控件
• 其他业务场景也可能用到此表单

符合以上场景之一，更推荐单独开发一个自定义组件，在自定义组件中实现异步校验。

参考以下两个文档，了解如何在自定义组件中自定义校验。

• 自定义组件章节
• 自定义校验章节

onValidate 配置异步校验

详细配置查看 onValidate prop 章节

点击按钮触发异步校验

代码示例

• App.tsx
• unitedSchema.ts

/**
 * 点击确定按钮，调用接口并返回接口错误信息。
 * 在onValidate相应表单中调用接口
 */
import DripForm from '@jdfed/drip-form';
import antd from '@jdfed/drip-form-theme-antd';
import unitedSchema from './unitedSchema';
import '@jdfed/drip-form/dist/index.css';
import '@jdfed/drip-form-theme-antd/dist/index.css';
import 'antd/dist/antd.css';

function App() {
  return (
    <DripForm
      // 表单配置文件
      unitedSchema={unitedSchema}
      // 导入组件
      uiComponents={{ antd }}
      onValidate={{
        //为表单text_VRA9QR设置异步校验
        text_VRA9QR: {
          //设置异步校验形式为：点击按钮触发异步校验
          type: 'click',
          //点击按钮后触发的校验函数
          fn: (val) => {
            //val是当前表单数据
            //。。。。调用异步接口
                        //返回错误信息
            return '点击异步校验，发生错误';
          },
        },
      }}
    ></DripForm>
  );
}

export default App;

代码沙盒：

表单数据改变触发异步校验

代码示例

• App.tsx
• unitedSchema.ts

/**
 * 更改表单数据，触发异步校验
 * 在onValidate相应表单中调用接口
 */
import DripForm from '@jdfed/drip-form';
import antd from '@jdfed/drip-form-theme-antd';
import unitedSchema from './unitedSchema';
import '@jdfed/drip-form/dist/index.css';
import '@jdfed/drip-form-theme-antd/dist/index.css';
import 'antd/dist/antd.css';

function App() {
  return (
    <DripForm
      // 表单配置文件
      unitedSchema={unitedSchema}
      // 导入组件
      uiComponents={{ antd }}
      onValidate={{
        //为表单text_VRA9QR设置异步校验
        text_VRA9QR: {
          //设置异步校验形式为：表单数据改变触发异步校验
          type: 'change',
          //点击按钮后触发的校验函数
          fn: (val) => {
            //val是当前表单数据
            //。。。。调用异步接口
            //返回错误信息
            return '表单数据变化触发异步校验，接口发生错误';
          },
        },
      }}
    ></DripForm>
  );
}

export default App;

代码沙盒：

表单提交触发校验

点击提交按钮或主动调用 ref.current.submit 函数时触发校验

代码示例

• App.tsx
• unitedSchema.ts

/**
 * 点击保存提交表单调用onValidate中各个表单校验函数，并展示错误
 */
import DripForm from '@jdfed/drip-form';
import antd from '@jdfed/drip-form-theme-antd';
import unitedSchema from './unitedSchema';
import '@jdfed/drip-form/dist/index.css';
import '@jdfed/drip-form-theme-antd/dist/index.css';
import 'antd/dist/antd.css';

function App() {
  return (
    <DripForm
      // 表单配置文件
      unitedSchema={unitedSchema}
      // 导入组件
      uiComponents={{ antd }}
      onValidate={{
        //为表单text_VRA9QR设置异步校验
        text_VRA9QR: {
          //设置异步校验形式为：表单数据改变触发异步校验
          type: 'submit',
          //点击按钮后触发的校验函数
          fn: (val) => {
            //val是当前表单数据
            //。。。。调用异步接口
            //返回错误信息
            return '输入框1异步校验失败';
          },
        },
        text_4xeGLN: {
          type: 'submit',
          fn: (val) => {
            return '输入框2异步校验失败';
          },
        },
      }}
    ></DripForm>
  );
}

export default App;

代码沙盒：

---

1. 存在相同表单，但校验接口不同的情况。如果没有这种需求，可以参考下一章节自定义校验↩