反应挂钩形式：如何验证一组单选按钮或复选框以确保至少选择一个

Question

我有一组复选框和一组 if radios，我想使用 React hook 表单进行验证，以确保如果提交时未选择任何复选框，则会生成错误消息。

我尝试过在他们的网站上尝试使用表单生成器，但我无法弄清楚如何将一组项目作为单个验证单元进行验证。

<div>
  <span>Option A <input type="checkbox" value="A" /></span>
  <span>Option B <input type="checkbox" value="B" /></span>
  <span>Option C <input type="checkbox" value="C" /></span>
</div>
<...output a validation error if one or more checkboxes hasnt been checked within the group>

<div>
  <span>Option A <input type="radio" value="A" /></span>
  <span>Option B <input type="radio" value="B" /></span>
  <span>Option C <input type="radio" value="C" /></span>
</div>
<...output a validation error if one or more radios hasnt been checked within the group>

这可能吗？有正确的方法吗？

感谢您的时间和关注。

Answer 1

您将react-hook-form标签添加到您的问题中，但您的代码中没有任何与之相关的内容。如果您确实正在使用 React Hook Form，那么完成您想要的任务的方法是通过以下方式使用模式验证yup：

const schema = yup.object().shape({
  checkbox: yup.array().min(1),
  radio: yup.string().required(),
});

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });
  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <span>
        Checkbox 1
        <input type="checkbox" {...register('checkbox')} value="A" />
      </span>
      <span>
        Checkbox 1
        <input type="checkbox" {...register('checkbox')} value="B" />
      </span>
      <span>
        Checkbox 3
        <input type="checkbox" {...register('checkbox')} value="C" />
      </span>
      <p style={{ color: 'red' }}>
        {errors.checkbox && 'At least one checkobox must be selected'}
      </p>
      <span>
        <label>Radio 1</label>
        <input type="radio" {...register('radio')} value="A" />
      </span>
      <span>
        <label>Radio 2</label>
        <input type="radio" {...register('radio')} value="B" />
      </span>
      <span>
        <label>Radio 3</label>
        <input type="radio" {...register('radio')} value="C" />
      </span>
      <p style={{ color: 'red' }}>{errors.radio && 'Radio is required'}</p>
      <input type="submit" />
    </form>
  );
}

查看正在运行的stackblitz。

请注意，由于单选按钮选项是排他性的（只能选择一个），您只是说该字段是必需的。