ElementUI表单校验报错TypeError: Cannot read properties of undefined (reading ‘validate‘)

问题描述：

Vue2工程中使用ElementUI表单(Form)的表单校验时出现报错：TypeError: Cannot read properties of undefined (reading 'validate')

本文作为踩坑记录，经过查阅资料后解决问题，为后来者提供快速解决方法，暂不分析其中原因。

---

解决方案：

一般来说，我们的代码参照官方提供的写法，如下：

 methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
}

首先，请确保代码中的验证规则（即rules）、属性设置（即prop）均正确，具体请参考elementUI官方文档。

确保上述几点后，仍然报错的，可以将$ref[formName].validate改为$ref.formName.validate即可正常运行

 methods: {
      submitForm(formName) {
        this.$refs.formName.validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
}