在React中使用Yup实现复选框的条件验证

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"),
  checkbox: Yup.bool().oneOf([true], '您需要接受条款和条件'), // 传统Yup复选框验证
});

const validationFunction = (value) => {
  if (!value) {
    return "您需要接受条款和条件"; // 如果值为false（未选中），返回错误信息
  }
  return null; // 如果值为true（选中），返回null表示验证通过
};

import React from 'react';
// 假设你的Checkbox组件定义如下，并支持validate属性
const Checkbox = ({ name, id, label, value, onChange, validate, error }) => (
  <div>
    <input
      type="checkbox"
      name={name}
      id={id}
      checked={value}
      onChange={onChange}
    />
    <label htmlFor={id}>{label}</label>
    {error && <div style={{ color: 'red' }}>{error}</div>}
  </div>
);

// ...在你的表单组件中
function MyForm({ checked, onChange, errors }) {
  const validationFunction = (value) => {
    if (!value) {
      return "您需要接受条款和条件";
    }
    return null;
  };

  return (
    <form>
      <Checkbox
        name="checkbox"
        id="checkbox"
        label="我接受条款和条件"
        value={checked}
        onChange={onChange}
        validate={validationFunction} // 将验证函数传递给组件
        error={errors.checkbox} // 假设errors对象中包含了验证结果
      />
      {/* 错误信息也可以在组件外部显示 */}
      <div className={errors.checkbox ? 'form__error' : ''}>
        {errors.checkbox}
      </div>
    </form>
  );
}

import React, { useState } from 'react';
// 假设你有一个通用的Checkbox组件，它能够接收validate prop
// 并且能够处理内部的验证状态或者将验证结果传递给父组件
const CustomCheckbox = ({ name, id, label, value, onChange, validate, error }) => {
  // 在实际应用中，这里的error prop可能由父组件（如Formik）传递
  // 或者Checkbox组件内部根据validate函数的结果来设置
  return (
    <div>
      <input
        type="checkbox"
        name={name}
        id={id}
        checked={value}
        onChange={onChange}
      />
      <label htmlFor={id}>{label}</label>
      {error && <div className="form__error">{error}</div>}
    </div>
  );
};

function AgreementForm() {
  const [checked, setChecked] = useState(false);
  const [errors, setErrors] = useState({});

  const handleCheckboxChange = (e) => {
    const newValue = e.target.checked;
    setChecked(newValue);
    // 当值改变时，立即执行验证
    const error = validationFunction(newValue);
    setErrors(prevErrors => ({ ...prevErrors, checkbox: error }));
  };

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

  const handleSubmit = (e) => {
    e.preventDefault();
    const checkboxError = validationFunction(checked);
    if (checkboxError) {
      setErrors(prevErrors => ({ ...prevErrors, checkbox: checkboxError }));
      console.log("表单验证失败");
      return;
    }
    console.log("表单提交成功，复选框已选中:", checked);
    // 进行其他表单提交逻辑
  };

  return (
    <form onSubmit={handleSubmit}>
      <CustomCheckbox
        name="checkbox"
        id="checkbox"
        label="我接受条款和条件"
        value={checked}
        onChange={handleCheckboxChange}
        validate={validationFunction} // 将验证函数传递给组件
        error={errors.checkbox} // 从状态中获取错误信息
      />
      {/* 也可以在组件外部再次显示错误，以确保一致性 */}
      {/* <div className={errors.checkbox ? 'form__error' : ''}>
        {errors.checkbox}
      </div> */}
      <button type="submit">提交</button>
    </form>
  );
}

// 样式示例 (form__error)
// .form__error {
//   color: red;
//   font-size: 0.8em;
//   margin-top: 5px;
// }