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

Question

我正在使用 vue-js 和 element-ui

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

示例

https://jsfiddle.net/nw8mw1s2/

重现步骤

点击每个字段

通过模糊触发验证

开始填充不同的输入

问题

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

也就是说，我怎么说“如果没有状态错误的字段，则将valudateState转为true”

提示

我想我们可以检查表单的每个formItem 的validateState。但我不知道具体怎么做。

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);
  }
}

Here's a working fiddle.