Cannot read properties of undefined (reading ‘validate‘) TypeError: Cannot read properties of undefi

问题描述：

在前端展示页面出现报错：

Uncaught runtime errors:
×ERROR
Cannot read properties of undefined (reading 'validate') TypeError: Cannot read properties of undefined (reading 'validate') at Proxy.registry (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/RegistryComponent.vue?vue&type=script&lang=js:41:30) at callWithErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:328:19) at callWithAsyncErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:335:17) at emit (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:796:5) at eval (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6877:45) at handleClick (webpack-internal:///./node_modules/element-plus/es/components/button/src/use-button.mjs:69:5) at callWithErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:328:19) at callWithAsyncErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:335:17) at HTMLButtonElement.invoker (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:863:82)

问题源代码：

<template>
    <div>
        <h2>
            <slot></slot>
        </h2>
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules" label-width="auto"
            class="demo-ruleForm">
            <el-form-item label="账户" prop="account">
                <el-input v-model="ruleForm.account" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="确认" prop="checkPass">
                <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="registry">注册</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { ElMessage } from 'element-plus';

export default {
    data() {
        return {
            ruleForm: {
                account: '',
                pass: '',
                checkPass: '',

            },
            rules: {
                account: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                ],
                pass: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                checkPass: [
                    { required: true, message: '请再次输入密码', trigger: 'blur' }
                ],
            },
            info: {
                account: '',
                password: '',
                currentComponent: 'LoginComponent',
                componentName: '登录'
            }

        }
    },
    methods: {
        registry() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.info.account = this.ruleForm.account;
                    this.info.password = this.ruleForm.pass;
                    this.$emit('tabComponent', this.info);
                    ElMessage.success("注册成功！")

                }
            })
        }
    }
}
</script>

查询问题：

It seems like there is an uncaught runtime error in your code related to calling the `validate` method on an undefined object. The error is occurring in the `RegistryComponent.vue` file at line 41. 

To resolve this issue, you should check why the object you are trying to call `validate` on is undefined. Make sure that the object is properly initialized before calling the `validate` method on it. 

If you need further assistance, feel free to share more details or code snippets related to the `RegistryComponent.vue` file.
似乎有一个未捕获的运行时错误在你的代码有关调用'validate'方法对一个未定义的对象。错误发生在“RegistryComponent.vue”文件的第41行。

要解决此问题，您应该检查为什么您试图在其上调用“validate”的对象未定义。在调用'validate'方法之前，请确保对象已正确初始化。

分析原因：

<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules" label-width="auto"
            class="demo-ruleForm">

this.$refs['ruleForm'].validate

 在form表单标签引用中， ref 的名字不一样，ref=“ruleFormRef”与使用refs数组方式调用时不一致错误，类似于标签的id属性去理解，ref=“ruleFormRef”是标签唯一；因此会出现this.$refs['ruleForm'] 不存在或者未正确初始化。

解决办法：

this.$refs['ruleFormRef'].validate

我的报错原因是因为ref的名字不一样；

https://blog.csdn.net/qq_38977099/article/details/103096008