使用Yup验证对象数组：要求至少有一个对象的value值为true或1

核心校验逻辑实现 #

通过 Yup 提供的array.test()自定义校验方法，判断数组中是否存在符合要求的元素即可：

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  // 此处替换为你表单中对应数组的字段名
  languageOptions: Yup.array()
    .of(
      Yup.object().shape({
        code: Yup.string().required(),
        value: Yup.mixed() // 可根据实际类型调整为number/boolean
      })
    )
    .required('选项数组不能为空')
    .test(
      'atLeastOneSelected',
      '至少需要选择一项', // 校验失败提示文案可自定义
      (optionList) => {
        // 校验逻辑：存在至少一项value为1或true即通过
        return optionList?.some(item => item.value === 1 || item.value === true) ?? false
      }
    )
})

对接 react-hook-form #

使用 @hookform/resolvers 提供的 yupResolver 对接校验规则即可：

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';

const FormComponent = () => {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(validationSchema),
    defaultValues: {
      // 替换为你自己的初始化数组
      languageOptions: [
        { "code": "english", "value": 0 },
        { "code": "french", "value": 0 },
        { "code": "german", "value": 0 },
        { "code": "italian", "value": 0 }
      ]
    }
  })

  const submitHandler = (data) => console.log('提交数据：', data)

  return (
    <form onSubmit={handleSubmit(submitHandler)}>
      {/* 表单控件渲染逻辑 */}
      {/* 错误提示 */}
      {errors.languageOptions && <span>{errors.languageOptions.message}</span>}
      <button type="submit">提交</button>
    </form>
  )
}

注意事项 #

• 示例中的languageOptions为数组对应的表单字段名，需要替换为你实际业务中的字段名称
• 如果你的value字段为固定布尔类型，可将数组项Schema中的value规则改为Yup.boolean()，如果为固定数字类型可改为Yup.number()
• 自定义test方法的第二个参数为校验失败的提示文案，可根据业务需求自行调整

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