diff --git a/frontend/src/views/project-management/environmental/components/EnvParamBox.vue b/frontend/src/views/project-management/environmental/components/EnvParamBox.vue
index 8c5e4a4345..7015a3eb0b 100644
--- a/frontend/src/views/project-management/environmental/components/EnvParamBox.vue
+++ b/frontend/src/views/project-management/environmental/components/EnvParamBox.vue
@@ -48,7 +48,7 @@
       <EnvParamsTab v-if="activeKey === 'envParams'" />
       <HttpTab v-else-if="activeKey === 'http'" />
       <DataBaseTab v-else-if="activeKey === 'database'" />
-      <HostTab v-else-if="activeKey === 'host'" />
+      <HostTab v-else-if="activeKey === 'host'" ref="hostTabRef" />
       <!-- <PreTab v-else-if="activeKey === 'pre'" />
       <PostTab v-else-if="activeKey === 'post'" /> -->
       <div v-else-if="activeKey === 'pre' || activeKey === 'post'" class="h-full">
@@ -77,6 +77,7 @@
 </template>
 
 <script lang="ts" setup>
+  import { ref } from 'vue';
   import { Message } from '@arco-design/web-vue';
   import { cloneDeep } from 'lodash-es';
 
@@ -114,6 +115,7 @@
   const loading = ref(false);
   const tabSettingVisible = ref(false);
   const appStore = useAppStore();
+  const hostTabRef = ref();
 
   const store = useProjectEnvStore();
   const envPluginList = ref<EnvPluginListItem[]>([]);
@@ -216,17 +218,27 @@
     };
   }
 
+  const saveCallBack = async () => {
+    // 校验通过回调保存
+    loading.value = true;
+    store.currentEnvDetailInfo.mock = true;
+    await updateOrAddEnv({ fileList: [], request: getParameters() });
+    setState(true);
+
+    Message.success(store.currentEnvDetailInfo.id ? t('common.updateSuccess') : t('common.saveSuccess'));
+    emit('ok', store.currentEnvDetailInfo.id);
+  };
+
   const handleSave = async () => {
     await envForm.value?.validate(async (valid) => {
       if (!valid) {
         try {
-          loading.value = true;
-          store.currentEnvDetailInfo.mock = true;
-          await updateOrAddEnv({ fileList: [], request: getParameters() });
-          setState(true);
-
-          Message.success(store.currentEnvDetailInfo.id ? t('common.updateSuccess') : t('common.saveSuccess'));
-          emit('ok', store.currentEnvDetailInfo.id);
+          // 保存Host-Tab的数据(目前只加了Host)
+          if (activeKey.value === 'host') {
+            hostTabRef.value?.validateForm(saveCallBack);
+          } else {
+            await saveCallBack();
+          }
         } catch (error) {
           // eslint-disable-next-line no-console
           console.log(error);
@@ -236,6 +248,7 @@
       }
     });
   };
+
   watchEffect(() => {
     if (store.currentId) {
       store.initEnvDetail();
diff --git a/frontend/src/views/project-management/environmental/components/envParams/HostTab.vue b/frontend/src/views/project-management/environmental/components/envParams/HostTab.vue
index 9d5a43c55d..e2136c04dd 100644
--- a/frontend/src/views/project-management/environmental/components/envParams/HostTab.vue
+++ b/frontend/src/views/project-management/environmental/components/envParams/HostTab.vue
@@ -48,13 +48,11 @@
   import { onClickOutside } from '@vueuse/core';
   import { debounce } from 'lodash-es';
 
-  import MsCodeEditor from '@/components/pure/ms-code-editor/index.vue';
   import MsBatchForm from '@/components/business/ms-batch-form/index.vue';
   import { FormItemModel } from '@/components/business/ms-batch-form/types';
 
   import { useI18n } from '@/hooks/useI18n';
   import useProjectEnvStore from '@/store/modules/setting/useProjectEnvStore';
-  import { getGenerateId } from '@/utils';
 
   import { EnvConfigItem } from '@/models/projectManagement/environmental';
 
@@ -104,6 +102,10 @@
   // 代码编辑器内容
   const editorContent = ref('');
 
+  function validateForm(cb?: () => void) {
+    return batchFormRef.value?.formValidate(cb);
+  }
+
   /**
    * 解析代码编辑器内容
    */
@@ -130,6 +132,10 @@
     });
   }
 
+  defineExpose({
+    validateForm,
+  });
+
   watch(
     () => editorContent.value,
     (val) => {