vue 使用element表单不触发验证

Posted 2023-04-07

参考技术A 开发时遇到一个问题，复用element表单，通过v-if控制显示的表单项，一个状态是非必填输入框，另一个是必填输入框。从非必填的表单项切换为必填表单项后，去验证表单会出现验证通过的情况，但是必填项其实为空。

出现这种情况的原因是，绑定验证规则是在mounted中执行的，验证规则改变后没有重新绑定，vue复用dom节点，验证规则就失效了，使用v-if的时候加一个唯一的key即可解决这个问题。

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

【中文标题】Vue.js - Element UI - 如何知道表单验证的状态

【英文标题】：Vue.js - Element UI - How to know the state of form validation

【发布时间】：2017-11-08 00:05:17

【问题描述】：

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

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

示例

https://jsfiddle.net/nw8mw1s2/

重现步骤

点击每个字段

通过模糊触发验证

开始填充不同的输入

问题

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

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

提示

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

【参考方案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.

【讨论】：

如果其中一个字段不是强制性的或没有任何要针对jsfiddle.net/wwyxt8es验证的规则，则该解决方案不起作用

您可能想将 let fields = this.$refs.ruleForm2.fields; 更改为 let mandatoryFields = this.$refs.informationTabForm.fields.filter((f) => f.isRequired === true); 无论如何，很好的解决方案，谢谢

当涉及clereable dropdown 时，我也找不到一个好的解决方案：jsfiddle.net/mab3q4f1

@Leo 更新了reduce 函数，将字段的required 属性考虑在内。不确定下拉组件，看起来它与表单的本机事件不兼容。也许您只需要在该组件的事件之一上指定 updateIsFormValidated 处理程序。

我为radio 的同样原因而挣扎 似乎validateState 在event change 被触发之前没有更新。因此，要验证select，您最好使用visible-change 事件，而对于radio，它不起作用