vue项目多层数据结构导致表单校验失效（如输入内容仍提示不能为空）_a-form-model 验证规则无效

在vue项目的data中，我们可能会声明如下结构的数据：

      people: {
        companyId: "",
        linkman: {
          name: "",
          phone: "",
        }
      },
1
2
3
4
5
6
7

这时候，以下的表单校验方法会失效：

	   <a-form-model :rules="rules" :model="people" ref="linkmanForm">
        <a-form-model-item label="姓名" prop="name">
          <a-input v-model="people.linkman.name"/>
        </a-form-model-item>
        <a-form-model-item label="电话" prop="phone">
          <a-input v-model="people.linkman.phone"/>
        </a-form-model-item>
      </a-form-model>
1
2
3
4
5
6
7
8

      rules: {
        name: [
          {required: true, message: '请输入联系人姓名', trigger: 'blur'},
        ],
        phone: [
          {validator: checkPhone, trigger: 'blur'},
        ],
      }
1
2
3
4
5
6
7
8

我们做如下修改

1. <a-form-model-item></a-form-model-item>的prop从第二层数据开始写

	   <a-form-model :rules="rules" :model="people" ref="linkmanForm">
        <a-form-model-item label="姓名" prop="linkman.name">
          <a-input v-model="people.linkman.name"/>
        </a-form-model-item>
        <a-form-model-item label="电话" prop="linkman.phone">
          <a-input v-model="people.linkman.phone"/>
        </a-form-model-item>
      </a-form-model>
1
2
3
4
5
6
7
8

2.rules里面的每一个规则名称使用单引号包裹起来

      rules: {
        'linkman.name': [
          {required: true, message: '请输入联系人姓名', trigger: 'blur'},
        ],
        'linkman.phone': [
          {validator: checkPhone, trigger: 'blur'},
        ],
      }
1
2
3
4
5
6
7
8

注意：a-form-model的prop、data里linkman的属性名（name、age）和rules里面的属性名（name、age）都必须一致
最后，大工告成，可以成功进行校验了