完善表单校验

src/views/adManage/sp/campaigns/CreateCampaigns/index.vue

@@ -550,7 +550,7 @@
     similarProductsInp: '',
     relatedProductsInp: '',
   })
-  const rules = computed(()=>({
+  const rules = computed(() => ({
     name: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
     adMix: [{ required: false, message: 'Please select Activity zone', trigger: 'change' }],
     count: [{ required: true, message: 'Please select Activity count', trigger: 'change' }],
@@ -566,90 +566,144 @@
     firstPage: [{ required: false, pattern: /^[0-9]{1,3}$/, message: '必须是0~900之间的整数百分比', trigger: 'change' }],
     other: [{ required: false, pattern: /^[0-9]{1,3}$/, message: '必须是0~900之间的整数百分比', trigger: 'change' }],
     adGroupName: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
-    autoRedirect: [
-      { required: true, trigger: 'change' },
-      // {
-      //   validator: (rule, value, callback) => {
-      //     if (value === 'defaultBid') {
-      //       console.log(value)
-      //       const bid = parseFloat(ruleForm.defaultBidInp)
-      //       const budget = parseFloat(ruleForm.budget)
-      //       // 对 defaultBidInp 进行更细致的验证
-      //       if (isNaN(bid) || bid < 0.02 || bid > 1000) {
-      //         callback(new Error('默认出价必须在0.02到1000之间'))
-      //       } else if (bid >= budget) { // 确保默认出价小于预算
-      //         callback(new Error('默认出价必须小于预算'))
-      //       } else {
-      //         callback() // 通过验证
-      //       }
-      //     } else {
-      //       callback() // 如果没有选择 'defaultBid'，则直接通过验证
-      //     }
-      //   },
-      //   trigger: 'blur' // 触发时机改为 'change' 以响应 radio 的变化
-      // }
-    ],
-    defaultBidInp: [
-      { required: true, message: '此项为必填项', trigger: 'blur' },
-      { validator: validateDefaultBidInp, trigger: 'blur' },
-    ],
-    // relatedProductsInp 的校验规则
-    relatedProductsInp: [
-      { required: ruleForm.relatedProducts, message: '此项为必填项', trigger: 'blur' },
-      {
-        validator: (rule, value, callback) => (ruleForm.relatedProducts ? checkBid(value, callback, 'relatedProductsInp') : callback()),
-        trigger: 'blur',
-      },
-    ],
-    // similarProductsInp 的校验规则
-    similarProductsInp: [
-      { required: ruleForm.similarProducts, message: '此项为必填项', trigger: 'blur' },
-      {
-        validator: (rule, value, callback) => (ruleForm.similarProducts ? checkBid(value, callback, 'similarProductsInp') : callback()),
-        trigger: 'blur',
-      },
-    ],
-    // broadMatchInp 的校验规则
-    broadMatchInp: [
-      { required: ruleForm.broadMatch, message: '此项为必填项', trigger: 'blur' },
-      { validator: (rule, value, callback) => (ruleForm.broadMatch ? checkBid(value, callback, 'broadMatchInp') : callback()), trigger: 'blur' },
-    ],
-    // closeMatchInp 的校验规则
-    closeMatchInp: [
-      { required: ruleForm.closeMatch, message: '此项为必填项', trigger: 'blur' },
-      { validator: (rule, value, callback) => (ruleForm.closeMatch ? checkBid(value, callback, 'closeMatchInp') : callback()), trigger: 'blur' },
-    ],
+    autoRedirect: [{ required: true, trigger: 'change' },],
+    defaultBidInp: getValidationRules('defaultBidInp'),
+    relatedProductsInp: getValidationRules('relatedProductsInp'),
+    similarProductsInp: getValidationRules('similarProductsInp'),
+    broadMatchInp: getValidationRules('broadMatchInp'),
+    closeMatchInp: getValidationRules('closeMatchInp'),
   }))
 
-  // 1. 定义验证方法
   function checkBid(value, callback, bidField) {
     const bid = parseFloat(value)
     const budget = parseFloat(ruleForm.budget)
-    if (isNaN(bid)) {
-      callback(new Error('请输入数字值'))
+    // 检查值是否为最多两位小数的普通数字格式
+    const isNormalNumberWithTwoDecimals = /^-?\d+(\.\d{1,2})?$/.test(value)
+
+    if (!isNormalNumberWithTwoDecimals) {
+      callback(new Error('请输入数字值（最多两位小数）'))
+    } else if (isNaN(bid)) {
+      callback(new Error('请输入有效的数字'))
     } else if (bid < 0.02 || bid > 1000) {
       callback(new Error('值必须在0.02到1000之间'))
     } else if (bid >= budget) {
       callback(new Error('出价必须小于预算'))
     } else {
-      callback() // 通过验证
+      callback()
     }
   }
 
-  const validateDefaultBidInp = (rule: any, value: any, callback: any) => {
-    if (ruleForm.autoRedirect === 'defaultBid') {
-      checkBid(value, callback, 'defaultBidInp')
-    }  else {
-      callback()
+  // const validateDefaultBidInp = (rule: any, value: any, callback: any) => {
+  //   if (ruleForm.autoRedirect === 'defaultBid') {
+  //     checkBid(value, callback, 'defaultBidInp')
+  //   }  else {
+  //     ruleFormRef.value?.clearValidate('defaultBidInp')
+  //     callback()
+  //   }
+  // }
+
+  // 校验defaultBidInp
+  // const validateDefaultBidInp = (rule, value, callback) => {
+  //   if (ruleForm.autoRedirect === 'defaultBid') {
+  //     checkBid(value, callback, 'defaultBidInp');
+  //   } else {
+  //     callback();
+  //   }
+  // };
+
+  // 校验其他相关字段
+  // const validateRelatedFields = (rule, value, callback, fieldName) => {
+  //   if (ruleForm.autoRedirect === 'targetBid') {
+  //     checkBid(value, callback, fieldName);
+  //   } else {
+  //     callback();
+  //   }
+  // };
+
+  // 动态生成校验规则的函数
+  function getValidationRules(fieldName) {
+    // 默认校验规则
+    const commonRules = [
+      { required: true, message: '此项为必填项', trigger: 'blur' },
+      { validator: (rule, value, callback) => checkBid(value, callback, fieldName), trigger: 'blur' },
+    ]
+
+    // 根据不同字段和状态返回特定的校验规则
+    switch (fieldName) {
+      case 'defaultBidInp':
+        if (ruleForm.autoRedirect === 'defaultBid') {
+          return commonRules
+        }
+        break
+      case 'similarProductsInp':
+        if (ruleForm.autoRedirect === 'targetBid' && ruleForm.similarProducts) {
+          return commonRules
+        } else if (ruleForm.similarProducts == false) {
+          ruleFormRef.value?.clearValidate(fieldName)
+        }
+        break
+      case 'relatedProductsInp':
+        if (ruleForm.autoRedirect === 'targetBid' && ruleForm.relatedProducts) {
+          return commonRules
+        } else if (ruleForm.relatedProducts == false) {
+          ruleFormRef.value?.clearValidate(fieldName)
+        }
+        break
+      case 'broadMatchInp':
+        if (ruleForm.autoRedirect === 'targetBid' && ruleForm.broadMatch) {
+          return commonRules
+        } else if (ruleForm.broadMatch == false) {
+          ruleFormRef.value?.clearValidate(fieldName)
+        }
+        break
+      case 'closeMatchInp':
+        // 仅当autoRedirect为'targetBid'且closeMatch开启时校验closeMatchInp
+        if (ruleForm.autoRedirect === 'targetBid' && ruleForm.closeMatch) {
+          return commonRules
+        } else if (ruleForm.closeMatch == false) {
+          ruleFormRef.value?.clearValidate(fieldName)
+        }
+        break
+      default:
+        return []
     }
+    // 如果不满足上述条件，则无需校验
+    return []
   }
 
-  watch(() => ruleForm.autoRedirect, (newVal) => {
-    if (newVal !== 'defaultBid') {
-      ruleFormRef.value?.clearValidate('defaultBidInp')
+  watch(
+    [
+      () => ruleForm.autoRedirect,
+      () => ruleForm.closeMatch,
+      () => ruleForm.broadMatch,
+      () => ruleForm.similarProducts,
+      () => ruleForm.relatedProducts,
+    ],
+    () => {
+      // 更新每个受影响字段的校验规则
+      rules.value.defaultBidInp = getValidationRules('defaultBidInp')
+      rules.value.closeMatchInp = getValidationRules('closeMatchInp')
+      rules.value.broadMatchInp = getValidationRules('broadMatchInp')
+      rules.value.similarProductsInp = getValidationRules('similarProductsInp')
+      rules.value.relatedProductsInp = getValidationRules('relatedProductsInp')
     }
-  })
-
+  )
+
+  // watch(() => ruleForm.autoRedirect, (newVal) => {
+  //   if (newVal === 'defaultBid') {
+  //     // 当autoRedirect变为'defaultBid'时，清除其他字段的校验状态，并校验defaultBidInp
+  //     ['relatedProductsInp', 'similarProductsInp', 'broadMatchInp', 'closeMatchInp'].forEach(field => {
+  //       ruleFormRef.value?.clearValidate(field);
+  //     });
+  //     ruleFormRef.value?.validateField('defaultBidInp');
+  //   } else if (newVal === 'targetBid') {
+  //     // 当autoRedirect变为'targetBid'时，清除defaultBidInp的校验状态，并校验其他相关字段
+  //     ruleFormRef.value?.clearValidate('defaultBidInp');
+  //     ['relatedProductsInp', 'similarProductsInp', 'broadMatchInp', 'closeMatchInp'].forEach(field => {
+  //       ruleFormRef.value?.validateField(field);
+  //     });
+  //   }
+  // });
 
   async function submitForm(formEl: FormInstance | undefined) {
     if (!formEl) return