【Vue3 + ElementUI】表单校验无效（写法：this.$refs[‘formName‘].validate((valid) =＞{} )）

在Vue 3和Element UI中，如果您遇到表单验证无效的问题，可能是因为您的代码中存在一些错误。以下是一个简单的例子，展示了如何在Vue 3和Element UI中使用表单验证：

1. 确保安装了Element UI并在项目中正确引入。
2. 在模板中，确保您有一个表单和表单项，并且为每个需要验证的表单项添加了prop属性，它应该与模型中的属性相匹配。
3. 在methods中，调用this.$refs.formName.validate来触发验证。

<template>
  <el-form :model="form" :rules="rules" ref="formName">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
 
export default {
  setup() {
    const form = ref({
      username: '',
      password: ''
    });
    const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 12, message: '密码长度在 6 到 12 个字符', trigger: 'blur' }
      ]
    };
 
    const submitForm = () => {
      this.$refs.formName.validate((valid) => {
        if (valid) {
          ElMessage.success('验证成功');
          // 在这里处理表单提交逻辑
        } else {
          ElMessage.error('表单验证失败');
          return false;
        }
      });
    };
 
    return {
      form,
      rules,
      submitForm
    };
  }
};
</script>

确保您的代码结构和引用方式与上述示例相匹配。如果您依然遇到问题，请检查是否有其他JavaScript错误或者是Element UI版本不匹配的问题。