Element Plus 表单校验不触发是怎么回事？

司空静静提问于 2026-03-29 22:28:15 阅读 4

组件

我在用 Element Plus 写一个登录表单，明明给 form-item 加了 rules，也绑定了 model，但点击提交时校验完全没反应，错误提示也不显示。是不是漏了什么关键步骤？

我试过在 submit 方法里调用 this.$refs.form.validate()，但控制台报错说 validate 不是函数，ref 好像没拿到实例。

<el-form :model="loginForm" :rules="rules" ref="loginForm">
  <el-form-item prop="username" label="用户名">
    <el-input v-model="loginForm.username" />
  </el-form-item>
  <el-button type="primary" @click="submit">登录</el-button>
</el-form>

我来解答赞 2 收藏

反馈

1 条解答

开发者启航 Lv1

看起来是 ref 没取对导致的，这是个常见的坑。在 Element Plus 里，表单的 ref 要和组件实例对应上才行。

你现在的代码里给 form 绑定了 ref="loginForm"，但在获取的时候用 this.$refs.form.validate() 就不对了，应该改成 this.$refs.loginForm.validate()。

另外补充一点，submit 方法最好这样写：

methods: {

  submit() {

    this.$refs.loginForm.validate((valid) => {

      if (valid) {

        console.log('校验通过');

      } else {

        console.log('校验失败');

        return false;

      }

    });

  }

}

通用的做法是在 validate 的回调里处理验证结果。记得检查下 element-plus 版本，有时候低版本可能会有些小 bug。我之前也踩过这个坑，改完 ref 就好了。

再检查下 rules 配置是不是正确，规则写错了也可能导致不触发校验。这种问题太常见了，每次都要来回检查好几遍才找到原因。

2026-03-29 23:01