添加活动名称不能有空格

activitylink/src/views/zhongchou/activity/index.vue

@@ -79,7 +79,11 @@
         >
           <el-form ref="addForm" :model="activity" :rules="rules" label-width="80px">
             <el-form-item label="活动名称" prop="activityName">
-              <el-input v-model="activity.activityName" placeholder="请输入活动名称" />
+              <el-input 
+                v-model="activity.activityName" 
+                placeholder="请输入活动名称" 
+                @input="handleActivityNameInput"
+              />
             </el-form-item>
             <el-form-item label="股票一" prop="marketOne">
               <el-select v-model="activity.marketOne" placeholder="请选择市场一" style="width: 100%">
@@ -243,6 +247,19 @@ const addActivity = async () => {
       return;
     }
 
+    // 验证活动名称是否包含空格（双重保险）
+    if (!activity.value.activityName || activity.value.activityName.trim() === '') {
+      ElMessage.error('活动名称不能为空');
+      return;
+    }
+
+    // 确保活动名称中没有空格
+    const cleanedActivityName = activity.value.activityName.replace(/\s/g, '');
+    if (cleanedActivityName !== activity.value.activityName) {
+      ElMessage.error('活动名称中不能包含空格');
+      return;
+    }
+
     // 表单验证通过，继续提交逻辑
     const activityData = {
       activityName: activity.value.activityName,
@@ -317,6 +334,7 @@ const activity = ref({
 const rules = {
   activityName: [
     { required: true, message: '请输入活动名称', trigger: 'blur' }
+    // 移除了自定义验证器，因为清理逻辑在提交时处理
   ],
   marketOne: [
     { required: true, message: '请选择市场一', trigger: 'change' }
@@ -334,7 +352,6 @@ const rules = {
     { required: true, message: '请选择结束时间', trigger: 'change' }
   ]
 }
-
 // 分页配置
 const currentPage = ref(1);
 const pageSize = ref(10); // 每页显示 10 条
@@ -346,6 +363,13 @@ const currentPageData = computed(() => {
   return tableData.value.slice(start, end);
 });
 
+// 处理活动名称输入，自动清除所有空格
+const handleActivityNameInput = (value) => {
+  // 清除所有空格
+  const cleanedValue = value.replace(/\s/g, '');
+  activity.value.activityName = cleanedValue;
+};
+
 // 分页事件处理
 const handleSizeChange = (val) => {
   pageSize.value = val;