环境

• ant-design-vue: 1.7.8
• vue2

问题

老项目使用了ant-design-vue: 1.7.8，因为其基于vue2，迁移vue3太过耗费精力。
我们知道，在vue3中实现表单的必填验证相当简单，只需要在a-form-item中设置rules即可：

<a-form-item
    label="名称"
    name="name"
    :rules="[{ required: true, message: '请填写名称' }]"
>

但是这个方法在ant-design-vue: 1.7.8，无效。

解决办法

• 使用a-form-model代替a-form
• 设置ref
• 设置rules规则
• 设置触发规则@blur
• 在提交数据时，设置必填项验证

<a-form-model
    ref="form"
    layout="vertical"
    :model="formState"
    :rules="rules"
>
    <a-form-model-item
      label="区域名称"
      prop="areaName"
      ref="areaName"
    >
      <a-input
        v-model="formState.areaName"
        @blur="
          () => {
            $refs.areaName.onFieldBlur();
          }"
      />
   </a-form-model-item>
</a-form-model>

提交数据时：

    save () {
      // 验证必填项
      this.$refs.form.validate(valid => {
        if (!valid) {
          return false
        } else {
          // TODO 业务逻辑
            })
          }
        }
      })
    }

以上。
鉴于本人经验有限，以上问题可能理解不到位或有错误，如有发现请各位评论指正，避免误导更多人。