Vuelidate 数组元素级表单验证实战指南

前言

在表单开发中，处理数组类型数据的验证是一个常见需求。Vuelidate 作为 Vue.js 的轻量级验证库，提供了强大的数组验证功能。本文将深入解析如何使用 Vuelidate 对数组中的每个元素进行独立验证。

核心概念

$each 验证器

Vuelidate 的 $each 验证器允许我们对数组中的每个元素应用相同的验证规则。这在处理动态表单数组时特别有用，比如用户列表、商品清单等场景。

验证层级结构

Vuelidate 的验证是分层的：

1. 数组整体验证（如数组是否为空、最小长度）
2. 数组元素验证（如每个元素的字段规则）

代码解析

模板部分

div(v-for="(v, index) in $v.people.$each.$iter")
  .form-group(:class="{ 'form-group--error': v.$error }")
    label.form__label Name for {{ index }}
    input.form__input(v-model.trim="v.name.$model")
  .error(v-if="!v.name.required") Name is required.
  .error(v-if="!v.name.minLength")
    | Name must have at least {{ v.name.$params.minLength.min }} letters.

关键点：

• 使用 $v.people.$each.$iter 遍历验证对象
• 每个输入框绑定到 v.name.$model 实现双向绑定
• 根据验证状态动态添加错误类
• 显示具体的验证错误信息

数组操作

button.button(@click="people.push({name: ''})") Add
button.button(@click="people.pop()") Remove

提供基本的数组操作功能，验证会自动响应数组变化。

整体验证反馈

.error(v-if="!$v.people.minLength")
  | List must have at least {{ $v.people.$params.minLength.min }} elements.
.error(v-else-if="!$v.people.required") List must not be empty.
.error(v-else-if="$v.people.$error") List is invalid.

显示数组级别的验证错误，优先级从具体到一般。

验证控制

button.button(@click="$v.people.$touch") $touch
button.button(@click="$v.people.$reset") $reset

提供手动触发验证和重置验证状态的方法。

验证规则定义

validations: {
  people: {
    required,
    minLength: minLength(3),
    $each: {
      name: {
        required,
        minLength: minLength(2)
      }
    }
  }
}

验证规则说明：

• people 数组必须存在 (required)
• 数组至少包含 3 个元素 (minLength: minLength(3))
• 每个元素的 name 字段必须存在且至少 2 个字符

最佳实践

1. 初始数据设计：为新增元素提供合理的初始值，避免验证干扰用户体验。

2. 错误提示时机：考虑使用 $touch 控制错误显示时机，不要在用户刚开始输入时就显示错误。

3. 复杂验证：对于更复杂的场景，可以结合自定义验证函数。

4. 性能优化：大型数组考虑分页或虚拟滚动，避免过多验证计算影响性能。

常见问题

Q: 为什么我的数组验证不生效？ A: 确保正确使用 $each 语法，并且验证规则正确定义在 validations 中。

Q: 如何验证数组中的多个字段？ A: 在 $each 中为每个字段定义验证规则即可。

Q: 动态添加元素时验证状态如何处理？ A: Vuelidate 会自动处理新增元素的验证，无需手动干预。

总结

通过 Vuelidate 的 $each 验证器，我们可以轻松实现数组元素的独立验证。这种模式非常适合动态表单场景，既保证了整体数据的有效性，又能对每个元素进行精细控制。掌握这一技巧将大大提升复杂表单的开发效率。