vuejs2 - Vue.js - Element UI - 如何了解表单验证的状态

Question

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

我想检查表单验证的状态，而无需单击提交按钮

示例

https://jsfiddle.net/nw8mw1s2/

重现步骤

单击每个字段

验证由模糊触发

开始填写不同的输入

问题

当验证最后一个输入时，isFormValidated 变为 true，我该如何执行此操作。

换句话说，我怎么说“如果没有字段出现状态错误，则将 valudateState 设为 true”

提示

我想我们可以检查表单的每个 formItem 的 validateState 。但我不知 Prop 体如何做。

Answer 1

我将创建一个新方法(例如 updateIsFormValidated)，并将其绑定(bind)到表单的 native 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.