问题记录-前端开发避坑(2)--element ui 表单验证失败

问题描述

添加表单验证规则失败，报错：

TypeError: Cannot read properties of undefined (reading 'validate')

可能的原因 1

prop 属性未设置（如果要使用 element ui 内置的验证、重置等方法，该属性是必填属性）或未传入正确的参数

分析

prop 属性只接受字符串表示的目标字段的属性名，比如对以下对象中的 name 字段做验证时，需要传入 prop="name" 。

ruleForm {
  name: '',
},
rules {
  name: [{ ... // 一些规则},]
}

若是对于嵌套的对象，则需要完整的字符串类型的属性访问表达式，比如验证 person 对象的 name 属性，完整的参数应该是 prop="person.name" 。

ruleForm {
  person {
    name: '',
    age: '',
  }
},
rules {
  name: [{ ... // 一些规则},],
  age: [{ ... // 一些规则},],
}

若需要使用变量作为该属性的参数，可以使用 vue 的 v-bind 指令： v-bind:prop（简写 :prop）。比如将数据对象和规则对象合并。此时为了验证 name 字段，需要使用 :prop:"personInfo[personInfo.key]."

ruleForm {
  personInfo {
    key: 'name',
    val: '',
    rule: [{ ... // 一些规则},],
  },
  ...
},

可能的原因 2

ref 属性的参数错误或 $refs 引用的对象错误

分析：vue 的 ref 属性用于注册子组件或 DOM 元素，注册后可以在父组件的 this.$refs 中访问。ref 属性的参数与 prop 相同，都是字符串类型。提供错误的引用名可能导致获取不到表单对象，而只有表单对象才能使用 validate 等内置方法。

解决方法：检查引用名是否正确指向了表单实例，该引用名首先需要在表单元素上注册，然后在验证等方法中指定。

可能的原因 3

表单元素绑定的数据对象和/或规则对象不符合规范

分析：element ui 使用的表单验证等方法期待两个对象，基本结构如下：

ruleForm {
  name: '',
  age: '',
  ...
},
rules {
  name: [{ ... // 一些规则 },],
  age: [{ ... // 一些规则 },],
  ...
}

对于嵌套的数据对象，prop 属性绑定参数时需要明确其嵌套层级，否则可能找不到数据对象。prop 是从表单绑定的 model 对象以下一级的属性开始访问。而且嵌套的对象可能不支持使用 element ui 内置的验证等方法，需要重写。
如果希望使用或必须使用结构化的数据对象，同时又要使用内置的验证方法，并且在使用框架组件时方便一些，可以在初始化组件时，将结构化的数据和规则打平成符合要求的数据对象和规则对象，目的是将组件的使用跟项目内部的结构化数据分离。