element-ui 如何获取未通过校验的字段

最新推荐文章于 2025-10-27 15:35:50 发布

原创最新推荐文章于 2025-10-27 15:35:50 发布 · 4.7k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#element-ui #form 表单 #校验 #未通过字段

收录于

element-ui 专栏收录该内容

44 篇文章

订阅专栏

本文介绍了在Vue.js中如何使用$refs进行表单验证。通过`validate`方法，我们可以校验整个表单，当校验结束后，回调函数会返回校验结果。如果表单验证失败，可以获取到未通过校验的字段并显示错误信息，帮助用户修正输入。

在添加了表单校验后，提交表单时，我们使用 validate 方法进行表单校验，代码如下：

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

我们可以看到 validate 方法是对整个表单进行校验的方法，参数未一个回调函数。该回调函数会在校验结束后被调用，并且传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise。

// valid 为是否校验成功，obj 为未通过校验的字段
this.$refs[formName].validate((valid, obj) => {
  if (valid) {
    alert('submit!');
  } else {
    console.log('error submit!!', obj);
    for (let key in obj) {
      // 提示信息： obj[key][0].message
      return false;
    }      
  }
});