vue2+ant 动态添加表单验证

Vue 2 结合 Ant Design 进行动态表单验证通常涉及到 Vue 的动态组件、`v-model` 和 Ant Design 的 Form 组件以及自定义校验规则。以下是一个简化的步骤说明：

1. **引入依赖**：
首先，确保已经安装了 Vue、Ant Design（包括 `@ant-design/vue` 包）和其他相关的依赖。

npm install vue antd axios

2. **动态组件**：
使用 Vue 的 `<component>` 或者 `v-for` 来创建动态加载的表单组件，每个组件都包含一个 `<a-form>` 和相关的验证属性。

<template>
  <div>
    <button @click="addForm">新增表单</button>
    <div v-for="(item, index) in forms" :key="index">
      <component :is="item.componentName" :formItem="item.formItem"></component>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      forms: [
        { componentName: 'FormItem', formItem: {} },
      ],
    };
  },
  methods: {
    addForm() {
      this.forms.push({ componentName: 'FormItem', formItem: {} });
    },
  },
};
</script>

3. **`FormItem` 组件**：
创建一个 `FormItem.vue` 文件，包含一个 `<a-form-item>` 并设置 `rules` 属性用于验证。可以使用事件总线或者 prop 将校验状态传递回父组件。

<template>
  <a-form-item :label="formItem.label" :rules="formItem.rules">
    <el-input v-model="formItem.value"></el-input>
  </a-form-item>
</template>

<script>
export default {
  props: ['formItem'],
  watch: {
    formItem: {
      handler(newVal, oldVal) {
        // 更新验证规则并处理值变化
      },
      deep: true,
    },
  },
};
</script>

4. **自定义校验规则**：
在表单组件内，你可以通过 `rule` 属性提供自定义的验证函数，例如使用 Ant Design 提供的 `async-validator` 插件。

5. **父组件验证管理**：
如果需要统一验证所有表单，可以在父组件中设置一个全局的验证方法，接收所有表单的状态，并触发相应的验证流程。

methods: {
  validateAllForms() {
    this.forms.forEach(form => {
      if (form.validate()) {
        // 表单验证通过，继续下一步操作...
      } else {
        // 验证失败，展示错误信息
      }
    });
  },
}