优化校验

src/components/NodeEditor.tsx

@@ -12,16 +12,10 @@ interface NodeEditorProps {
   onClose: () => void;
 }
 
-
+function Validate(updateData : NodeDataUpdate, settings : Settings) : string[] {
-class Validation {
-  constructor(
-    public readonly isValid: boolean,
-    public readonly errors: string[],
-  ) {}
-}
-
-function Validate(updateData : NodeDataUpdate, settings : Settings) : Validation {
   const errors: string[] = [];
+  const {ipv4Address, ipv6Address, mtu, listenPort} = updateData;
+  const {ipv4Subnet, ipv6Subnet} = settings;
 
   if(!updateData.label) {
     errors.push("Label不能是空");
@@ -31,8 +25,6 @@ function Validate(updateData : NodeDataUpdate, settings : Settings) : Validation
     errors.push("privateKey不能是空");
   }
 
-  const ipv4Subnet = settings.ipv4Subnet;
-  const ipv4Address = updateData.ipv4Address;
   if(ipv4Subnet) {
     const cidr = IPNetwork.parse(ipv4Subnet);
     if(!ipv4Address) {
@@ -42,8 +34,6 @@ function Validate(updateData : NodeDataUpdate, settings : Settings) : Validation
     }
   }
 
-  const ipv6Subnet = settings.ipv6Subnet;
-  const ipv6Address = updateData.ipv6Address;
   if(ipv6Subnet) {
     const cidr = IPNetwork.parse(ipv6Subnet);
     if(!ipv6Address) {
@@ -53,8 +43,23 @@ function Validate(updateData : NodeDataUpdate, settings : Settings) : Validation
     }
   }
 
-  const isValid : boolean = errors.length === 0;
+  if(listenPort !== undefined) {
-  return new Validation(isValid, errors);
+      if(isNaN(listenPort)) {
+        errors.push("监听端口不是数字");
+      } else if(listenPort < 30000 || listenPort > 49151) {
+        errors.push("监听端口不在范围内：[30000, 49151]");
+      }
+  }
+
+  if(mtu !== undefined) {
+    if(isNaN(mtu)) {
+      errors.push("mtu不是数字");
+    } else if(mtu < 1200) {
+      errors.push("mtu过小（小于1200）");
+    }
+  }
+
+  return errors;
 }
 
 export default function NodeEditor({ 
@@ -94,12 +99,11 @@ export default function NodeEditor({
     }
 
     const validation = Validate(updateData, settings);
-    if(!validation.isValid) {
+    setErrors(validation);
-      setErrors(validation.errors);
+    if(validation.length > 0) {
       return ;
     }
 
-    setErrors([]);
     onUpdate(updateData);
     onClose();
   };
@@ -183,18 +187,15 @@ export default function NodeEditor({
           </div>
 
           <div className="form-group">
-            <label>侦听端口</label>
+            <label>监听端口</label>
             <input
               type="number"
               min="30000"
               max="49151"
               step="1"
-              value={listenPort || ''}
+              value={listenPort || ""}
-              onChange={e => {
+              onChange={e => setListenPort(e.target.valueAsNumber)}
-                const value = e.target.valueAsNumber;
+              placeholder='范围：[30000, 49151]'
-                setListenPort(isNaN(value) ? undefined : value);
-              }}
-              placeholder={`默认值：${settings.listenPort}`}
             />
           </div>
 
@@ -205,11 +206,8 @@ export default function NodeEditor({
               min="1200"
               step="1"
               value={mtu || ''}
-              onChange={e => {
+              onChange={e => setmtu(e.target.valueAsNumber)}
-                const value = e.target.valueAsNumber;
+              placeholder='需要大于1200'
-                setmtu(isNaN(value) ? undefined : value);
-              }}
-              placeholder={settings.mtu ? `默认值：${settings.mtu}` : ''}
             />
           </div>
 

src/components/SettingsEditor.tsx

@@ -9,6 +9,44 @@ interface SettingEditorProps {
   onClose: () => void;
 }
 
+function Validate(updateData: Settings) : string[] {
+  const errors: string[] = [];
+
+  const {ipv4Subnet, ipv6Subnet, mtu, listenPort} = updateData;
+
+  if(ipv4Subnet) {
+    const result = IPNetwork.parse(ipv4Subnet)
+    if(!result.isValid) {
+      errors.push("IPv4子网：" + (result.error ?? "ipv4子网不合法"))
+    } else if(result.version != 'IPv4') {
+      errors.push("IPv4子网：" + "非IPv4 CIDR");
+    }
+  }
+
+  if(ipv6Subnet) {
+    const result = IPNetwork.parse(ipv6Subnet)
+    if(!result.isValid) {
+      errors.push("IPv6子网：" + (result.error ?? "子网不合法"));
+    } else if(result.version != 'IPv6') {
+      errors.push("IPv6子网：" + "非IPv6 CIDR");
+    }
+  }
+
+  if(isNaN(listenPort)) {
+    errors.push("监听端口不是数字");
+  } else if(listenPort < 30000 || listenPort > 49151) {
+    errors.push("监听端口不在范围内：[30000, 49151]");
+  }
+
+  if(isNaN(mtu)) {
+    errors.push("mtu不是数字");
+  } else if(mtu < 1200) {
+    errors.push("mtu过小（小于1200）");
+  }
+
+  return errors;
+}
+
 export default function SettingsEditor({ 
   settings,
   onUpdate, 
@@ -22,35 +60,20 @@ export default function SettingsEditor({
   const [ipv6Subnet, setIpv6Subnet] = useState(settings.ipv6Subnet)
 
   const handleSave = (): void => {
-    const errorInfo : string[] = [];
+    const updateData = {
-    if(ipv4Subnet) {
-      const result = IPNetwork.parse(ipv4Subnet)
-      if(!result.isValid) {
-        errorInfo.push("IPv4子网：" + (result.error ?? "ipv4子网不合法"))
-      } else if(result.version != 'IPv4') {
-        errorInfo.push("IPv4子网：" + "非IPv4 CIDR");
-      }
-    }
-    if(ipv6Subnet) {
-      const result = IPNetwork.parse(ipv6Subnet)
-      if(!result.isValid) {
-        errorInfo.push("IPv6子网：" + (result.error ?? "子网不合法"));
-      } else if(result.version != 'IPv6') {
-        errorInfo.push("IPv6子网：" + "非IPv6 CIDR");
-      }
-    }
-    if(errorInfo.length > 0) {
-      setErrors(errorInfo);
-      return ;
-    }
-
-    setErrors([]);
-    onUpdate({
       listenPort: listenPort,
       mtu: mtu,
       ipv4Subnet: ipv4Subnet,
       ipv6Subnet: ipv6Subnet
-    });
+    };
+
+    const validation = Validate(updateData);
+    setErrors(validation);
+    if(validation.length > 0) {
+      return ;
+    }
+
+    onUpdate(updateData);
     onClose();
   };
 
@@ -77,7 +100,7 @@ export default function SettingsEditor({
         )}
 
         <div className="form-group">
-          <label>侦听端口</label>
+          <label>监听端口</label>
           <input
             type="number"
             min="30000"
@@ -95,10 +118,7 @@ export default function SettingsEditor({
             min="1200"
             step="1"
             value={mtu || ''}
-            onChange={e => {
+            onChange={e => setmtu(e.target.valueAsNumber)}
-              const value = e.target.valueAsNumber;
-              setmtu(isNaN(value) ? 1420 : value);
-            }}
           />
         </div>