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

Question

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

我想检查表单验证的状态，而不必点击submit button

实施例

https://jsfiddle.net/nw8mw1s2/

重现的步骤

点击每个字段

使用模糊

触发验证

开始填写不同的输入

问题

如果验证了最后一个输入，isFormValidated转为true，我该怎么办？

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

提示

我想我们可以查看表单的每个validateState的{​​{1}}。但我不明白具体怎么做。

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.