如何过滤errorBag仅统计可见元素 解决隐藏元素干扰表单校验问题

问题背景 #

开发表单校验功能时，因部分元素未配置内置校验规则，需要通过errorBag捕获全量校验错误，否则常规校验流程无法覆盖这类元素的校验状态。
使用的自定义输入元素示例：

<v-text-field
  v-model.number="dataObject.mydate.year"
  placeholder="Year"
  required
  type="number"
  min="1"
  aria-label="Year:"
  id="year"
  :rules="defaultValidations.yearRules"
  :error="validateDate(dataObject.mydate).estate"
  :error-messages="validateFechaFinDescanso(dataObject.mydate).errorName"
  v-on:keypress="defaultValidations.methods.isNum($event)"
  v-bind="attrs"
></v-text-field>

原有表单整体校验通过判断逻辑如下，该逻辑会将v-if控制未渲染的不可见元素的校验错误纳入统计，导致校验结果不符合预期：

valid = Object.values(this.$refs.form.errorBag).every(e => !e)

实现方案 #

核心逻辑是先过滤掉未实际挂载渲染的元素对应的错误记录，仅统计当前可见可交互的输入项校验状态，可直接替换原有判断代码：

推荐写法（兼容自定义校验规则场景） #

直接调用Vuetify表单内置方法获取当前已渲染的激活输入组件，逐个判断错误状态，不需要手动遍历errorBag，自动过滤v-if移除的未挂载元素：

// 仅统计当前实际渲染的输入项校验状态，自动排除v-if隐藏的未挂载元素
valid = this.$refs.form.getInputs().every(inputItem => !inputItem.hasError)

兼容原有errorBag逻辑的写法 #

如果你需要保留直接读取errorBag的逻辑，可以先收集当前已渲染输入组件的唯一标识，过滤errorBag中不属于可见元素的条目后再做判断：

// 收集当前已挂载渲染的所有输入组件实例ID
const mountedInputIds = new Set(
  this.$refs.form.getInputs().map(input => input._uid)
)
// 过滤掉未挂载元素的错误记录后再判断整体校验状态
valid = Object.entries(this.$refs.form.errorBag)
  .filter(([inputId]) => mountedInputIds.has(Number(inputId)))
  .every(([, hasError]) => !hasError)

注意事项 #

• 该过滤逻辑仅针对v-if控制的未挂载元素生效，v-show隐藏的元素属于CSS层面隐藏、组件实际已挂载，本身就应该纳入校验范围，不需要过滤
• 不要通过DOM查询判断元素可见性，依赖组件实例的挂载状态判断性能更好、兼容性更高，不会受DOM结构调整影响

内容的提问来源于stack exchange，提问作者pdro_99