如何在Nuxt3中结合useArrayField与Yup实现复选框验证

问题根源 #

你的代码存在几个关键错误：

1. 错误使用useFieldArray：useFieldArray是用于动态增删表单数组项（比如添加多行输入框）的API，不适合绑定多选复选框的v-model。你拿到的employmentTypes是fieldArray的内部对象，不是直接的数组值，这导致验证无法正确关联到复选框的选择状态。
2. 未正确获取handleSubmit：handleSubmit需要从useForm的返回值中解构，你当前代码直接调用但未定义，会导致提交逻辑失效。
3. 验证规则的误解：Yup的array().required()仅检查数组是否为undefined/null，空数组[]会通过验证；而你尝试的required(1)是语法错误，正确的应该是min(1)。

修复后的完整代码 #

模板部分 #

<template>
  <form @submit="onSubmit">
    <ul class="form_radio_list">
      <li
        v-for="(employmentType, index) in mastersStore.masters?.EmploymentTypeCodes"
        :key="employmentType.code"
      >
        <label class="form_checkbox_label">
          <input
            type="checkbox"
            name="employment_type_codes"
            v-model="values.employment_type_codes"
            :value="employmentType.code"
          />
          <p class="form_checkbox_text">{{ employmentType.name }}</p>
        </label>
      </li>
    </ul>
    <!-- 可选：显示错误信息 -->
    <span v-if="errors.employment_type_codes" class="error">
      {{ errors.employment_type_codes }}
    </span>
    <button type="submit">提交</button>
  </form>
</template>

脚本部分 #

<script setup>
import { useForm } from 'vee-validate'
import { useMastersStore } from '~~/store/master'
import type { UpdateUserConditionForEmailInput } from '~~/types/user_condition_for_email'
import * as yup from 'yup'

// 定义验证规则
const validationSchema = yup.object({
  employment_type_codes: yup.array()
    .min(1, '雇用形態は必須です') // 确保至少选择1项
    .required('雇用形態は必須です'), // 可选：防止字段未定义（实际min(1)已覆盖空数组场景）
})

// 初始化表单
const { handleSubmit, values, errors } = useForm({
  validationSchema,
  initialValues: {
    employment_type_codes: [], // 初始化空数组
  },
})

const mastersStore = useMastersStore()

// 提交处理
const onSubmit = handleSubmit((params: UpdateUserConditionForEmailInput) => {
  props.goToConfirm(params)
})

// 声明props
const props = defineProps<{
  goToConfirm: (params: UpdateUserConditionForEmailInput) => void
}>()
</script>

关键修正点说明 #

• 替换useFieldArray为useForm的values：直接绑定复选框的v-model到values.employment_type_codes，这是Vee-Validate管理的表单数组值，验证规则会直接作用于这个数组。
• 正确使用min(1)规则：确保数组长度至少为1，覆盖“未勾选任何选项”的场景。
• 完善表单初始化：添加initialValues确保字段初始化为空数组，避免undefined导致的验证异常。
• 正确解构handleSubmit：从useForm中获取提交处理器，确保验证通过后才执行提交逻辑。
• 添加错误信息显示：通过errors对象可以直接获取字段的验证错误，方便用户反馈。

对之前尝试的规则的解释 #

1. 嵌套对象验证规则：你尝试的array().of(object())是用于验证数组中每个元素的结构，而你的复选框值是字符串/代码，不是对象，所以完全不适用。
2. array().required()：仅检查字段是否存在，空数组[]会被判定为有效，所以无法触发“未勾选”的验证提示。
3. array().required(1)：这是语法错误，required方法不接受数字参数，正确的长度验证应该用min(1)。

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