Vue.js - 元素 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.