使用 Yup 和组件级方法实现 React 复选框必选验证

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  first_name: Yup.string().required("First Name is required"),
  last_name: Yup.string().required("Last name is required"),
  email: Yup.string().required("Email is required").email("Email is invalid"),
  phone: Yup.string().required("Phone is required"),
  // 复选框必选验证：必须为 true
  checkbox: Yup.bool().oneOf([true], '您需要接受条款和条件'),
});

const validationFunction = (value) => {
  if (!value) {
    return "您需要接受条款和条件";
  }
  return null;
};

import React, { useState } from 'react';

// 假设这是一个自定义的 Checkbox 组件
// 它内部处理 value, onChange, label 等，并接受 validate prop
const Checkbox = ({ name, id, label, value, onChange, validate }) => {
  const [error, setError] = useState(null);

  const handleChange = (e) => {
    onChange(e); // 调用父组件的 onChange
    if (validate) {
      const validationResult = validate(e.target.checked);
      setError(validationResult);
    }
  };

  return (
    <div>
      <input
        type="checkbox"
        name={name}
        id={id}
        checked={value}
        onChange={handleChange}
      />
      <label htmlFor={id}>{label}</label>
      {error && <div className="component__error">{error}</div>}
    </div>
  );
};

// 在你的 React 表单组件中
function MyForm() {
  const [checked, setChecked] = useState(false);
  const [formErrors, setFormErrors] = useState({}); // 用于整体表单错误

  const handleCheckboxChange = (e) => {
    setChecked(e.target.checked);
    // 清除 Yup 或其他表单库可能设置的错误
    setFormErrors(prev => ({ ...prev, checkbox: null }));
  };

  const validationFunction = (value) => {
    if (!value) {
      return "您需要接受条款和条件";
    }
    return null;
  };

  // 假设 errors.checkbox 是由外部表单库（如 Formik）或状态管理提供的
  // 这里为了演示，我们模拟一个错误
  const errors = {
    checkbox: formErrors.checkbox || (!checked && "您需要接受条款和条件") // 结合组件级或表单级错误
  };

  return (
    <form>
      <Checkbox
        name="checkbox"
        id="checkbox"
        label="我接受条款和条件"
        value={checked}
        onChange={handleCheckboxChange}
        // validate={validationFunction} // 如果 Checkbox 组件内部需要即时验证
      />
      {/* 错误信息显示，通常由外部表单库管理 */}
      <div className={errors.checkbox ? 'form__error' : ''}>
        {errors.checkbox}
      </div>
    </form>
  );
}

<div className={errors.checkbox ? 'form__error' : ''}>
  {errors.checkbox}
</div>