如何使用 useArrayField 和 yup 验证复选框

问题描述 投票:0回答:0

问题

我想用 Nuxt3 为跟随输入设置验证,但是不能。

组件

<template>
  <form method="" action="" @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="employmentTypes"
            :value="employmentType.code"
          />
          <p class="form_checkbox_text">{{ employmentType.name }}</p>
        </label>
      </li>
    </ul>
  </form>
</template>

剧本

<script>
    import { useForm, useField, useFieldArray } 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, '雇用形態は必須です'),
    })

    const { fields: employmentTypes } = useFieldArray('employment_type_codes')
    const onSubmit = handleSubmit((params: UpdateUserConditionForEmailInput): void => {
        props.goToConfirm(params)
    })
</script>

基于README,我尝试了一些数组模式,但没有成功。 https://github.com/jquense/yup/blob/master/README.md#arrayoftype-schema-this

//CASE1
const validationSchema = yup.object({
    employment_type_codes: yup.array().of(
        yup.object().shape({
            employmentTypes: yup.boolean().required('雇用形態は必須です'),
        })
    ),
    employment_type_codes: yup.array().required(1, '雇用形態は必須です'),
})

//CASE2
const validationSchema = yup.object({
    employment_type_codes: yup.array().required(1, '雇用形態は必須です'),
})
nuxt.js yup vee-validate
© www.soinside.com 2019 - 2024. All rights reserved.