记录react antd中的form表单中的rule中的validator校验

前置了解validator校验
validator函数有3个参数1校验对象，校验值，校验回调

const validateNumber = (rule, value, callback) => {
    if (value <= 100) {
      callback('数字必须大于100');
    }
  }; 


<Form.Item
          label="菜单名称"
          name="menuName"
          rules={[{ validator: validateNumber }]}
        >
          <Input
            placeholder="请输入大于100的数字"
            onBlur={() => {
              //form.validateFields(['number']);
            }}
          />
        </Form.Item>

了解完封装好我的code
age field

import { Col } from 'antd';
import { localFieldConfig } from './Age.config';
export { localFieldConfig } from './Age.config';
import FormItemInput from '@/pages/Myantd/Form/FormItemInput';
import VLD from '@/pages/Myantd/Form/Rule/VLD';
const Age = ({ FieldConfig, layout, form }: any) => {
  const fieldProps = FieldConfig?.['field-props'];

//vld
  const Rule = {
    VLD_00001: VLD.VLD_00001(form.getFieldValue(FieldConfig?.field)),
  };

  return (
    <Col {...layout}>
      <FormItemInput
        labelName={FieldConfig?.field}
        disabled={fieldProps?.disabled === 'Y'}
        required={fieldProps?.required === 'Y'}
        Rules={fieldProps?.rules.map((rule: any) => Rule[rule])}
      />
    </Col>
  );
};

Age.displayName = localFieldConfig.field;
export default Age;

VLD

import lodash from 'lodash';

export default ({ required, Rules }: any) => {
  const newRule = [
    {
      required,
      message: 'required',
    },
    ...Rules,
  ];

  return newRule.map((rule) => {
    return lodash.isFunction(rule)
      ? {
          validator: (_rule: any, value: any) => {
            return new Promise((resolve, reject) => {
              rule(_rule, value, (msg: string | undefined) => {
                if (msg) {
                  //校验失败
                  reject(new Error(msg));
                }
                //校验成功
                resolve(Promise.resolve());
              });
            });
          },
        }
      : rule;
  });
};

 可自定义校验函数

import lodash from 'lodash';
export const VLD_00001 = (value: any) => {
  return (rule: any, value: any, callback: Function) => {
    if (!lodash.isEmpty(value) && value < 10) {
      callback('不能小于10 age');
    } else {
      callback();
    }
  };
};