react+ts+antdesign表单校验

数据部分：

export const borderData: BorderProps[] = [
  {
    label: '重点排放单位名称',
    name: 'name',
    type: 'input',
    col: 12,
    max: 100,
    selectName: '',
    value: '',
    pattern: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
  },
  {
    name: 'code',
    label: '统一社会信用代码',
    type: 'input',
    col: 12,
    max: 18,
    selectName: '',
    value: '',
    pattern: /^[A-Za-z0-9]+$/,
  },
  {
    label: '公司归属',
    name: 'company_belong',
    selectName: 'CompanyOwnership',
    type: 'select',
    col: 12,
    value: '',
    pattern: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
  },
];

核心内容部分：

<Form form={FormBorder}>
            <Row>
              {borderData?.map((item, index) => {
                return (
                  <Col span={item.col} key={index}>
                    <FormItem
                      name={item.name}
                      label={item.label}
                      rules={[
                        {
                          required: true,
                          message: `${item.label}必填项`,
                        },
                        () => ({
                          validator(_, value) {
                            let rules = item.pattern;
                            let flag = rules?.test(value);
                            if (flag) {
                              return Promise.resolve();
                            }
                            return Promise.reject(new Error('请输入正确内容'));
                          },
                        }),
                      ]}
                    >
                      {getType(item, !EditStatus ? true : false)}
                    </FormItem>
                  </Col>
                );
              })}
            </Row>
          </Form>

数据提交验证:

const onFinish = async () => {
    FormBorder.validateFields()
      .then(() => {
        setLoading(true);
        updateOrganizationInfo(Number(current), valid)
          .then((res) => {
           
            setLoading(false);
          })
          .catch(() => {
            setLoading(false);
          });
      })
      .catch(error => {
        console.log(error);
      });
  };