检查IP和端口 输入合法性

src/pages/Index/Settings/Device.vue

@@ -147,7 +147,7 @@ import {
   setLocalIP,
   setAutoLogoutTime,
 } from '../../../services/Index/settings/settings'
-import { eMessage } from '../utils'
+import { eMessage, isValidIPv4 } from '../utils'
 
 // 系统设置状态
 interface Settings {
@@ -240,8 +240,13 @@ const updateSetting = async (key: string, value: any) => {
         res = await setDHCP(value)
         break
       case 'localIP':
+        const addr = value.trim()
+        if (!isValidIPv4(addr)) {
+          eMessage.error('请输入合法的IP地址')
+          return
+        }
         hideKeyboard()
-        res = await setLocalIP(value)
+        res = await setLocalIP(addr)
         break
     }
 

src/pages/Index/Settings/Lis.vue

@@ -71,11 +71,11 @@
       <div class="options">
         <input
           type="text"
-          v-model="lisSettings.LISNetPort"
+          v-model="lisSettings.LISNetPortStr"
           @focus="showKeyboard('port')"
           readonly
         />
-        <button @click="updLisPort(lisSettings.LISNetPort)">设置</button>
+        <button @click="updLisPort(lisSettings.LISNetPortStr)">设置</button>
       </div>
     </div>
     <div
@@ -151,17 +151,22 @@ import {
 } from '@/services'
 import { onMounted, onUnmounted, ref } from 'vue'
 import * as R from 'ramda'
-import { eMessage } from '../utils'
+import { eMessage, isValidIPv4 } from '../utils'
 
 const LISInterfaceItems = R.toPairs(LISInterfaceMap)
 const LISSerialBaudrateItems = R.toPairs(LISSerialBaudrateMap)
 const LISTypeItems = R.toPairs(LISTypeMap)
 
-const lisSettings = ref<LISSettings | undefined>(undefined)
+const lisSettings = ref<(LISSettings & { LISNetPortStr: string }) | undefined>(
+  undefined,
+)
 const getLisSetting = async () => {
   const res = await getLISSetting()
   if (res && res.success) {
-    lisSettings.value = res.data
+    lisSettings.value = {
+      ...res.data,
+      LISNetPortStr: res.data.LISNetPort.toString(),
+    }
   }
 }
 
@@ -211,8 +216,13 @@ const updLisAutoExport = async (auto: boolean) => {
 }
 
 const updLisIP = async (ip: string) => {
+  const addr = ip.trim()
+  if (!isValidIPv4(addr)) {
+    eMessage.error('请输入合法的IP地址')
+    return
+  }
   hideKeyboard()
-  const res = await setLISNetIp(ip)
+  const res = await setLISNetIp(addr)
   if (res && res.success) {
     getLisSetting()
   } else {
@@ -220,9 +230,14 @@ const updLisIP = async (ip: string) => {
   }
 }
 
-const updLisPort = async (port: number) => {
+const updLisPort = async (port: string) => {
+  const p = port.toString().trim()
+  if (!/^\d+$/.test(p)) {
+    eMessage.error('请输入合法的端口值')
+    return
+  }
   hideKeyboard()
-  const res = await setLISNetPort(port)
+  const res = await setLISNetPort(p)
   if (res && res.success) {
     getLisSetting()
   } else {
@@ -245,7 +260,7 @@ const showKeyboard = (field: 'ip' | 'port') => {
     currentInputValue.value = lisSettings.value?.LISNetIp || ''
   }
   if (field === 'port') {
-    currentInputValue.value = lisSettings.value?.LISNetPort.toString() || ''
+    currentInputValue.value = lisSettings.value?.LISNetPortStr || ''
   }
   currentInputField.value = field
   keyboardVisible.value = true
@@ -260,7 +275,7 @@ const handleKeyboardInput = (value: string) => {
   if (currentInputField.value === 'ip') {
     lisSettings.value!.LISNetIp = value
   } else {
-    lisSettings.value!.LISNetPort = +value
+    lisSettings.value!.LISNetPortStr = value
   }
 }
 

src/pages/Index/utils/index.ts

@@ -6,6 +6,11 @@ export function formatRemainTime(seconds: number) {
   return min.padStart(2, '0') + ':' + sec.padStart(2, '0')
 }
 
+export function isValidIPv4(ip: string) {
+  const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+  return ipv4Regex.test(ip);
+}
+
 export const eMessage = {
   error: (msg: string) => {
     ElMessage({