实现：动态表单验证 vue2.x 和vue3

// 表单的数据格式

const obj = {
  zdmc: '',
  sffk: undefined,
  zdlx: undefined,
  sfzj: undefined,
  zdzs: '',
  mrz: '',
  sjbz: ''
};
const formValue = reactive({
  lx: undefined,
  cj: undefined,
  sszt: '',
  bm: '',
  box: [obj]
});

// 核心
1、:prop="box.${index}.zdmc" 解析出来的结果为 box.[index].zdmc。
2、必须有自己的rules
（原理：prop的path对应formValue.box[index].zdmc，然后去找自己本身的rules去校验）

      <div
        class="form_box_lb"
        v-for="(item, index) in formValue.box"
        :key="index"
      >
        <a-form-model-item
          label="字段名称"
          :prop="`box.${index}.zdmc`"
          :labelCol="{ span: 4 }"
          :wrapperCol="{ span: 20 }"
          :rules="[
            { required: true, trigger: 'blur', message: '请输入字段名称' },
            { required: true, pattern: /^[^\s]*$/, message: '禁止输入空格' }
          ]"
        >
          <a-input
            v-model="item.zdmc"
            placeholder="请输入字段名称"
            :maxLength="64"
          />
        </a-form-model-item>
     </div>

vue3 antd 动态表单验证