diff --git a/frontend/src/global/form-rules.ts b/frontend/src/global/form-rules.ts
index ec40c6915..44ffdaee5 100644
--- a/frontend/src/global/form-rules.ts
+++ b/frontend/src/global/form-rules.ts
@@ -186,6 +186,17 @@ const checkParamUrlAndPort = (rule: any, value: any, callback: any) => {
     }
 };
 
+export function checkNumberRange(min: number, max: number): FormItemRule {
+    return {
+        required: true,
+        trigger: 'blur',
+        min: min,
+        max: max,
+        type: 'number',
+        message: i18n.global.t('commons.rule.numberRange', [min, max]),
+    };
+}
+
 interface CommonRule {
     requiredInput: FormItemRule;
     requiredSelect: FormItemRule;
diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index b784d02ef..237f4b45d 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -136,8 +136,10 @@ export default {
             domain: 'domain name format error',
             databaseName: 'Support English, numbers, _, length 1-30',
             ipErr: 'IP [{0}] format error, please check',
+            numberRange: 'Number range: {0} - {1}',
             paramName: 'Support English, numbers, .- and _, length 2-30',
             paramComplexity: 'Support English, numbers, {0}, length 6-30',
+            paramUrlAndPort: 'The format is http(s)://(domain name/ip):(port)',
         },
         res: {
             paramError: 'The request failed, please try again later!',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 3d02b3bb9..23e998944 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -141,6 +141,7 @@ export default {
             domain: '域名格式错误',
             databaseName: '支持英文、数字、_,长度1-30',
             ipErr: 'IP [{0}] 格式错误,请检查',
+            numberRange: '数字范围: {0} - {1}',
             paramName: '支持英文、数字、.-和_,长度2-30',
             paramComplexity: '支持英文、数字、{0},长度6-30',
             paramUrlAndPort: '格式为 http(s)://(域名/ip):(端口)',
diff --git a/frontend/src/views/website/website/nginx/performance/index.vue b/frontend/src/views/website/website/nginx/performance/index.vue
index d2e67e5e0..c160d9574 100644
--- a/frontend/src/views/website/website/nginx/performance/index.vue
+++ b/frontend/src/views/website/website/nginx/performance/index.vue
@@ -5,23 +5,27 @@
                 <el-col :span="1"><br /></el-col>
                 <el-col :span="9">
                     <el-form-item label="server_names_hash_bucket_size" prop="server_names_hash_bucket_size">
-                        <el-input clearable v-model.number="form.server_names_hash_bucket_size"></el-input>
+                        <el-input
+                            clearable
+                            type="number"
+                            v-model.number="form.server_names_hash_bucket_size"
+                        ></el-input>
                         <span class="input-help">{{ $t('nginx.serverNamesHashBucketSizeHelper') }}</span>
                     </el-form-item>
                     <el-form-item label="client_header_buffer_size" prop="client_header_buffer_size">
-                        <el-input clearable v-model.number="form.client_header_buffer_size">
+                        <el-input clearable type="number" v-model.number="form.client_header_buffer_size">
                             <template #append>K</template>
                         </el-input>
                         <span class="input-help">{{ $t('nginx.clientHeaderBufferSizeHelper') }}</span>
                     </el-form-item>
                     <el-form-item label="client_max_body_size" prop="client_max_body_size">
-                        <el-input clearable v-model.number="form.client_max_body_size">
+                        <el-input clearable type="number" v-model.number="form.client_max_body_size">
                             <template #append>MB</template>
                         </el-input>
                         <span class="input-help">{{ $t('nginx.clientMaxBodySizeHelper') }}</span>
                     </el-form-item>
                     <el-form-item label="keepalive_timeout" prop="keepalive_timeout">
-                        <el-input clearable v-model.number="form.keepalive_timeout"></el-input>
+                        <el-input clearable type="number" v-model.number="form.keepalive_timeout"></el-input>
                         <span class="input-help">{{ $t('nginx.keepaliveTimeoutHelper') }}</span>
                     </el-form-item>
                     <el-form-item>
@@ -57,7 +61,7 @@
 <script lang="ts" setup>
 import { Nginx } from '@/api/interface/nginx';
 import { GetNginxConfigByScope, UpdateNginxConfigByScope } from '@/api/modules/nginx';
-import { Rules } from '@/global/form-rules';
+import { checkNumberRange, Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
@@ -85,13 +89,13 @@ let nginxFormRef = ref();
 let loading = ref(false);
 
 const variablesRules = reactive({
-    server_names_hash_bucket_size: [Rules.number],
-    client_header_buffer_size: [Rules.number],
-    client_max_body_size: [Rules.number],
-    keepalive_timeout: [Rules.number],
+    server_names_hash_bucket_size: [checkNumberRange(1, 9999)],
+    client_header_buffer_size: [checkNumberRange(0, 999999999)],
+    client_max_body_size: [checkNumberRange(0, 999999999)],
+    keepalive_timeout: [checkNumberRange(0, 999999999)],
     gzip: [Rules.requiredSelect],
     gzip_min_length: [Rules.requiredSelect],
-    gzip_comp_level: [Rules.number],
+    gzip_comp_level: [checkNumberRange(1, 9)],
 });
 
 const getParams = async () => {