优化

src/components/EditModal/index.tsx

@@ -32,7 +32,8 @@ const EditModal: React.FC<EditModalProps> = ({
   const [value, setValue] = useState(initialValue);
   const [isValid, setIsValid] = useState(true);
   const [isIllegal, setIsIllegal] = useState(false);
-
+  const [hasIllegal, setHasIllegal] = useState(true);
+  const [canEdit, setCanEdit] = useState(true);
   // 使用全局键盘状态
   const {
     keyboardHeight,
@@ -64,19 +65,18 @@ const EditModal: React.FC<EditModalProps> = ({
   }, [visible, initialValue]);
 
   const createExcludeRegex = (chars: string) => {
-    // 转义正则表达式特殊字符
     const escapedChars = chars.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-
-    // 构建负向字符类正则表达式
-    // ^[^...]*$ 匹配不包含任何指定字符的完整字符串
     const pattern = `[${escapedChars}]`;
-
     return new RegExp(pattern);
   };
   const handle_input_change = (e: any) => {
     const new_value = e.detail.value;
     setValue(new_value);
-
+    let ishasIllegal = false;
+    if (type === "nickname") {
+      ishasIllegal = createExcludeRegex(invalidCharacters).test(new_value);
+      setHasIllegal(ishasIllegal);
+    }
     const illegal =
       /\b(SELECT|INSERT|UPDATE|DELETE|DROP|UNION|ALTER|CREATE|EXEC|DECLARE)\b|('|--|\/\*|\*\/|;|#)|(=|'|"|`|\\|\|\|&&)|\bOR\s+['"]?[\w]+['"]?\s*=\s*['"]?[\w]+['"]?|\bUNION\s+SELECT\b|\bDROP\s+TABLE\b|\bINSERT\s+INTO\b|\bUPDATE\s+[\w]+\s+SET\b|\bDELETE\s+FROM\b/i.test(
         new_value
@@ -86,22 +86,32 @@ const EditModal: React.FC<EditModalProps> = ({
     const valid =
       new_value.length >= 2 &&
       new_value.length <= maxLength &&
-      !createExcludeRegex(invalidCharacters).test(new_value);
+      !ishasIllegal &&
+      !illegal &&
+      canEdit;
     setIsValid(valid);
   };
 
   const handle_save = () => {
-    if (!isValid) {
+    if (isIllegal) {
       Taro.showToast({
-        title: validationMessage || `请填写 2-${maxLength} 个字符`,
+        title: "输入的字符非法",
         icon: "none",
         duration: 2000,
       });
       return;
     }
-    if (isIllegal) {
+    if (hasIllegal) {
       Taro.showToast({
-        title: "输入的字符非法",
+        title: "内容不能包含@<>/等无效字符",
+        icon: "none",
+        duration: 2000,
+      });
+      return;
+    }
+    if (!isValid) {
+      Taro.showToast({
+        title: validationMessage || `请填写 2-${maxLength} 个字符`,
         icon: "none",
         duration: 2000,
       });
@@ -171,7 +181,14 @@ const EditModal: React.FC<EditModalProps> = ({
                 </View>
               </>
             ) : (
-              <View style={{display: "flex", flexDirection: "column", width: "100%", height: "120px"}}>
+              <View
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  width: "100%",
+                  height: "120px",
+                }}
+              >
                 <Textarea
                   className="text_input profile"
                   value={value}
@@ -196,7 +213,12 @@ const EditModal: React.FC<EditModalProps> = ({
           </View>
 
           {/* 验证提示 */}
-          {isIllegal ? (
+          <View className="validation_message">
+            <Text className="validation_text">
+              {validationMessage || `请填写 2-${maxLength} 个字符`}
+            </Text>
+          </View>
+          {/* {isIllegal ? (
             <View className="validation_message">
               <Text className="validation_text illegal">输入的字符非法</Text>
             </View>
@@ -208,13 +230,13 @@ const EditModal: React.FC<EditModalProps> = ({
                 </Text>
               </View>
             )
-          )}
+          )} */}
         </View>
 
         {/* 底部按钮 */}
         <View className="modal_footer">
           <View
-            className={`save_button ${!isValid || isIllegal ? "disabled" : ""}`}
+            className={`save_button ${!isValid ? "disabled" : ""}`}
             onClick={handle_save}
           >
             <Text className="save_text">保存</Text>