Vue.js - Element UI - 如何知道表单验证的状态

Question

我正在使用，vue-js并且element-ui

我想检查表单验证的状态，而无需单击 submit button

例子

https://jsfiddle.net/nw8mw1s2/

重现步骤

单击每个字段

验证由模糊触发

开始填充不同的输入

题

当最后一个输入被验证时，我该怎么做， isFormValidated变成true.

换句话说，我怎么能说“如果没有状态错误的字段，则变为valudateState真”

提示

我想我们可以检查validateState每个formItem表格的 。但我看不出具体怎么做。

Answer 1

我将创建一个新方法（例如updateIsFormValidated），并将其绑定到表单的本focusout机事件：

<el-form :model="ruleForm2" @focusout.native="updateIsFormValidated" ...>

每当表单中的任何输入失去焦点时，都会触发此方法。它将尝试检查表单组件中的每个字段是否已成功验证，如果任何表单项的验证状态仍处于待处理状态，则每 100 毫秒触发一次：

updateIsFormValidated() {
  let fields = this.$refs.ruleForm2.fields;
  if (fields.find((f) => f.validateState === 'validating')) {
    setTimeout(() => { this.updateIsFormValidated() }, 100);
  } else {
    this.isFormValidated = fields.reduce((acc, f) => {
      let valid = (f.isRequired && f.validateState === 'success');
      let notErroring = (!f.isRequired && f.validateState !== 'error');
      return acc && (valid || notErroring);
    }, true);
  }
}

这是一个工作小提琴。