React表单中Checkbox组件的动态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], 'You need to accept the terms and conditions'),
});

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

import React, { useState } from 'react';
// 假设您有一个Checkbox组件，它接受name, id, label, value, onChange, validate等props
// 并且您的表单上下文（如Formik或React Hook Form）会收集并显示validate prop返回的错误。

const MyForm = () => {
  const [checked, setChecked] = useState(false);
  const [errors, setErrors] = useState({}); // 用于存储错误信息

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

  const handleCheckboxChange = (e) => {
    const isChecked = e.target.checked;
    setChecked(isChecked);

    // 触发自定义验证
    const error = validationFunction(isChecked);
    setErrors(prevErrors => ({ ...prevErrors, checkbox: error }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 在实际应用中，这里会结合Formik或React Hook Form的onSubmit处理
    // 确保在提交前进行所有验证
    const finalCheckboxError = validationFunction(checked);
    if (finalCheckboxError) {
      setErrors(prevErrors => ({ ...prevErrors, checkbox: finalCheckboxError }));
      alert('表单验证失败！');
      return;
    }
    alert('表单提交成功！');
    console.log('Form submitted with checkbox:', checked);
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 其他表单字段 */}

      <label htmlFor="checkbox">
        <input
          type="checkbox"
          name="checkbox"
          id="checkbox"
          checked={checked}
          onChange={handleCheckboxChange}
          // 在更高级的表单库中，validate prop会被自动调用
          // 这里为了演示，我们在onChange中手动调用并更新错误状态
        />
        我接受条款和条件
      </label>
      <div className={errors.checkbox ? 'form__error' : ''}>
        {errors.checkbox}
      </div>

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

export default MyForm;