跳到主要内容

自定义校验

当存在特殊校验，常规JSON Schema提供的关键字无法满足时，可以使用自定义校验

须知

在了解如何自定义校验前，需要了解下Drip Form内部的错误类型分类

详细查看错误分类章节

自定义校验有以下3种方案

  1. 自定义组件中 dispatch 设置自定义错误
  2. onValidate prop配置自定义校验
  3. 自定义关键字+自定义校验插件(进阶)

本文主要介绍第1种方案

自定义组件中 dispatch 设置自定义错误​

回顾

在自定义组件章节中，我们了解到可以通过 diaptch 方法设置自定义错误信息。

代码示例
/**
 * 自定义nubmer组件
 */
import { memo, useEffect } from 'react';
import { InputNumber } from 'antd';
import { useField } from '@jdfed/hooks';
import { CommonProps } from '../global';

const NumberField = ({
  onChange,
  fieldData,
  fieldKey,
  dispatch,
  getKey,
  formMode,
  ...restProps
}: CommonProps) => {
  const _onChange = useField({ fieldKey, onChange, getKey }, dispatch);

  useEffect(() => {
    if (fieldData > 2) {
      //大于2，设置自定义错误
      dispatch({
        type: 'setErr',
        action: {
          set: {
            [fieldKey]: '数字不能大于2',
          },
        },
      });
    } else {
      // 小于2，删除自定义错误
      dispatch({
        type: 'setErr',
        action: {
          deleteKeys: fieldKey,
        },
      });
    }
  }, [fieldData, dispatch, fieldKey]);

  // view 查看模式
  if (formMode === 'view') return fieldData || null;
  // edit 编辑模式
  return <InputNumber onChange={_onChange} value={fieldData} {...restProps} />;
};

export const numberField = memo(NumberField);

代码沙盒：Open in StackBlitz

查看dispatch Api章节了解更多用法。

onValidate prop配置自定义校验​

类似异步校验的用法，只是将异步代码换成自定义校验的代码
App.tsx
const onValidate = {
    key: {
        type: 'change',
        fn: (val) => {
            //自定义校验的代码
            return '这是自定义校验的错误信息'
        },
    },
}

<DripForm
    unitedSchema={{ unitedSchema }}
    uiComponents={{antd}}
    onValidate={onValidate}
/>

详细代码示例，参考上一章节异步校验

自定义关键字+自定义校验插件(进阶)​

为什么推荐使用自定义关键字
  • 将复杂的验证逻辑带入schem配置
  • 避免冗余代码
  • 实时修改数据
  • 跨业务复用

更多开发查看后续进阶章节