Vee-Validate 验证2个Schema

实践环境为：

primevue + vue3 + vee-validate 4.9.6

有时候，我们在一个页面， 需要2个schema做验证， 如下是核心处理逻辑：

// 项目表单schema 
const schema1 = yup.object().shape({
  project_name: yup.string().required('项目名称不能为空'),
  project_budget: yup
    .number()
    .typeError('项目预算必须是有效的数值')
    .required('项目预算不能为空')
    .test('is-valid-amount', '项目预算金额需要大于0', (value) => {
        if (value <= 0) {
        return false;
        }
        // 这里可以添加其他自定义验证规则
        return true; // 校验通过
    }), 
  project_process_type: yup
    .mixed()
    .test('is-string', '项目开展形式必须选择', (value) => {
      if (typeof value === 'object' && value.name && typeof value.name === 'string') {
        // 如果 value 是对象且包含 name 字段，将其转换为字符串
        return true;
      }
      return false;
    }),
    project_type: yup
    .mixed()
    .test('is-string', '项目来源必须选择', (value) => {
      if (typeof value === 'object' && value.name && typeof value.name === 'string') {
        // 如果 value 是对象且包含 name 字段，将其转换为字符串
        return true;
      }
      return false;
    }), 
    tech_domain: yup
    .mixed()
    .test('is-string', '技术领域必须选择', (value) => {
      if (typeof value === 'object' && value.name && typeof value.name === 'string') {
        // 如果 value 是对象且包含 name 字段，将其转换为字符串
        return true;
      }
      return false;
    }),
    expected_end_date: yup
    .string()
    .required('项目结束时间必须填')
    .test('is-date', '项目结束时间必须是有效日期', (value) => {
      // 将日期字符串转换为日期对象
      const date = new Date(value);
      // 检查日期对象是否有效
      return !isNaN(date); // 如果日期无效，isNaN(date) 将返回 true
    })
    .test('is-future-date', '项目结束时间必须是将来的日期', (value) => {
      // 将日期字符串解析为日期对象
      const date = new Date(value);
      // 获取当前日期
      const currentDate = new Date();
      currentDate.setHours(0, 0, 0, 0); // 忽略时间部分
      return date > currentDate; // 检查日期是否在未来
    }),    
});
//项目总预算 schema2
const schema2 = yup.object().shape({
  personnel_salary: yup
    .number()
    .typeError('必须是有效的数值')
    .test('is-valid-amount', '金额格式不对', (value) => {
      if (value < 0) {
        return false;
      }
      // 这里可以添加其他自定义验证规则
      return true; // 校验通过
    }),
//   project_budget: yup
//     .number()
//     .typeError('项目预算必须是有效的数值')
//     .required('项目预算不能为空')
//     .test('is-valid-amount', '项目预算金额需要大于0', (value) => {
//     if (value <= 0) {
//     return false;
//     }
//     // 这里可以添加其他自定义验证规则
//     return true; // 校验通过
//     }),     
  direct_input_cost: yup
    .number()
    .typeError('必须是有效的数值')
    .test('is-valid-amount', '金额格式不对', (value) => {
      if (value < 0) {
        return false;
      }
      // 这里可以添加其他自定义验证规则
      return true; // 校验通过
    }),
  depreciation_cost: yup
    .number()
    .typeError('必须是有效的数值')
    .test('is-valid-amount', '金额格式不对', (value) => {
      if (value < 0) {
        return false;
      }
      // 这里可以添加其他自定义验证规则
      return true; // 校验通过
    }),
  intangible_assets: yup
    .number()
    .typeError('必须是有效的数值')
    .test('is-valid-amount', '金额格式不对', (value) => {
      if (value < 0) {
        return false;
      }
      // 这里可以添加其他自定义验证规则
      return true; // 校验通过
    }),
  product_design_fee: yup
    .number()
    .typeError('必须是有效的数值')
    .test('is-valid-amount', '金额格式不对', (value) => {
      if (value < 0) {
        return false;
      }
      // 这里可以添加其他自定义验证规则
      return true; // 校验通过
    }),
  other_related_costs: yup
    .number()
    .typeError('必须是有效的数值')
    .test('is-valid-amount', '金额格式不对', (value) => {
      if (value < 0) {
        return false;
      }
      // 这里可以添加其他自定义验证规则
      return true; // 校验通过
    }),
  outsourced_rnd_fee: yup
    .number()
    .typeError('必须是有效的数值')
    .test('is-valid-amount', '金额格式不对', (value) => {
      if (value < 0) {
        return false;
      }
      // 这里可以添加其他自定义验证规则
      return true; // 校验通过
    }),
  // 继续添加其他字段...
});


//Yup schemas 指定
const { defineComponentBinds:defineComponentBinds1, 
        handleSubmit:handleSubmit1, 
        resetForm:resetForm1, 
        errors:errors1 } = useForm({
  validationSchema: schema1,
});

const { defineComponentBinds:defineComponentBinds2, 
        handleSubmit:handleSubmit2, 
        resetForm:resetForm2, 
        errors:errors2 } = useForm({
  validationSchema: schema2,
});

// 表单字段绑定
const project_name = defineComponentBinds1('project_name');
const project_process_type = defineComponentBinds1('project_process_type');
const project_type = defineComponentBinds1('project_type');
const project_budget = defineComponentBinds1('project_budget');
const tech_domain = defineComponentBinds1('tech_domain');
const expected_end_date = defineComponentBinds1('expected_end_date');

const onSubmit1 = handleSubmit1((values) => {
    // 将 project_process_type 转换为字符串   
    const date = new Date(values.expected_end_date);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); //月份从0开始，需要加1并补零
    const day = String(date.getDate()).padStart(2, '0');

    values.expected_end_date = `${year}-${month}-${day}`;  
  console.log('提交的数据：', values);
  researchService.createProject(values)
        .then((data) => {
            console.log('data:', data);
            active.value = active.value+1; // 设置为下一个 Tab
        })
        .catch((error) => {
            // 在这里处理捕获到的异常
            console.log('发生异常：', error);
        });     
});
//项目表单提交逻辑处理 EOF

//项目总预算表单提交逻辑处理  
const personnel_salary = defineComponentBinds2('personnel_salary');
const direct_input_cost = defineComponentBinds2('direct_input_cost');
const depreciation_cost = defineComponentBinds2('depreciation_cost');
const intangible_assets = defineComponentBinds2('intangible_assets');
const product_design_fee = defineComponentBinds2('product_design_fee');
const other_related_costs = defineComponentBinds2('other_related_costs');
const outsourced_rnd_fee = defineComponentBinds2('outsourced_rnd_fee');
// project_budget= defineComponentBinds2('project_budget');


const onSubmit2 = handleSubmit2((values) => {
    projectFeeDialog.value = false;
    console.log('Submitted with', values); 
});
//项目总预算表单提交逻辑处理 EOF