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

我正在使用，

vue js

和

element ui

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

submit按钮

例子

复制步骤 单击每个字段

使用模糊按钮触发验证

开始填充不同的输入

问题: 当最后一个输入被验证时，

isFormValidated

变为

true

，我该怎么做

换句话说，我怎么说“如果没有带状态错误的字段，那么将

valuedatestate

设置为true”

提示

---

我想我们可以检查表单中每个

formItem

的

validateState

。但我不知道如何具体实现它。

我将创建一个新方法（比如

updateIsFormValidated

），并将其绑定到表单的本机

focusout

事件：

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

---

如果某个字段不是强制性的或没有任何要验证的规则，则解决方案不起作用。您可能希望更改

let fields=this。$refs.ruleForm2.fields

to

let mandatoryFields=this.$refs.informationTabForm.fields.filter（（f）=>f.isRequired==true）

无论如何，很好的解决方案谢谢，所以当涉及

可记录下拉列表时，我找不到好的解决方案：@Leo更新了
reduce
函数，将字段的
required
属性考虑在内。不确定下拉组件，看起来它不能很好地处理窗体的本机事件。也许您只需在该组件的某个事件上指定
updateIsFormValidated
处理程序。我之所以要使用
无线电
也是出于同样的原因，似乎在触发
事件
更改之前，
validateState
没有更新。因此，要验证
选择
时，最好使用
可见更改
事件，而对于
收音机
则不起作用
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);
  }
}