在React表单中为复选框设置条件验证：Yup Schema与组件级验证

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  first_name: Yup.string().required("名是必填项"),
  last_name: Yup.string().required("姓是必填项"),
  email: Yup.string().required("邮箱是必填项").email("邮箱格式无效"),
  phone: Yup.string().required("电话是必填项"),
  // 复选框验证：必须为true
  checkbox: Yup.bool().oneOf([true], '您需要接受条款和条件才能继续'),
});

// 在您的React组件中，您可能会这样使用它（例如与Formik或React Hook Form结合）
// ...
// const { errors, touched, handleSubmit, handleChange, values } = useFormik({
//   initialValues: { /* ... */ checkbox: false },
//   validationSchema,
//   onSubmit: values => { /* ... */ }
// });
// ...

import React from 'react';
import { useFormik } from 'formik'; // 假设使用Formik

// 假设您的Checkbox组件是一个自定义组件，接收name, id, label, value, onChange等props
const Checkbox = ({ name, id, label, value, onChange }) => (
  <div>
    <input
      type="checkbox"
      name={name}
      id={id}
      checked={value}
      onChange={onChange}
    />
    <label htmlFor={id}>{label}</label>
  </div>
);

function MyForm() {
  const formik = useFormik({
    initialValues: {
      first_name: '',
      last_name: '',
      email: '',
      phone: '',
      checkbox: false,
    },
    validationSchema: validationSchema,
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      {/* 其他输入字段 */}
      <div>
        <label htmlFor="first_name">名</label>
        <input
          id="first_name"
          name="first_name"
          type="text"
          onChange={formik.handleChange}
          value={formik.values.first_name}
        />
        {formik.errors.first_name && formik.touched.first_name ? (
          <div className="form__error">{formik.errors.first_name}</div>
        ) : null}
      </div>
      {/* ... 其他字段 ... */}

      <Checkbox
        name="checkbox"
        id="checkbox"
        label="我接受条款和条件"
        value={formik.values.checkbox}
        onChange={formik.handleChange}
      />
      {formik.errors.checkbox && formik.touched.checkbox ? (
        <div className="form__error">{formik.errors.checkbox}</div>
      ) : null}

      <button type="submit">提交</button>
    </form>
  );
}

import React, { useState } from 'react';

// 自定义验证函数
const validationFunction = (value) => {
  if (!value) {
    return "您需要接受条款和条件";
  }
  return null; // 返回null表示验证通过
};

// 假设这是一个更复杂的Checkbox组件，它可能内部处理自己的验证状态
// 或者由外部表单库注入validate prop
const CheckboxWithValidation = ({ name, id, label, value, onChange, validate }) => {
  const [error, setError] = useState(null);

  const handleChange = (e) => {
    const newValue = e.target.checked;
    onChange(e); // 调用外部onChange
    const validationError = validate ? validate(newValue) : null;
    setError(validationError);
  };

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

// 在您的表单中使用
function MyFormWithComponentValidation() {
  const [checked, setChecked] = useState(false);
  const [checkboxError, setCheckboxError] = useState(null);

  const handleCheckboxChange = (e) => {
    const newValue = e.target.checked;
    setChecked(newValue);
    // 直接在这里调用验证函数，或者让CheckboxWithValidation内部处理
    const error = validationFunction(newValue);
    setCheckboxError(error);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const error = validationFunction(checked); // 最终提交前再次验证
    if (error) {
      setCheckboxError(error);
      return;
    }
    alert("表单提交成功！复选框已选中。");
    // 提交逻辑
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* ... 其他字段 ... */}
      <CheckboxWithValidation
        name="checkbox"
        id="checkbox"
        label="我接受条款和条件"
        value={checked}
        onChange={handleCheckboxChange}
        validate={validationFunction} // 将验证函数传递给组件
      />
      {/* 如果CheckboxWithValidation不处理错误显示，则可以在这里显示 */}
      {checkboxError && <div className="form__error">{checkboxError}</div>}
      <button type="submit">提交</button>
    </form>
  );
}