用户名称添加@<>/等字符的检查

src/components/EditModal/index.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
-import { View, Text, Textarea, Input, Picker } from '@tarojs/components';
-import Taro from '@tarojs/taro';
-import './EditModal.scss';
-import { useKeyboardHeight } from '@/store/keyboardStore'
+import React, { useState, useEffect } from "react";
+import { View, Text, Textarea, Input, Picker } from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import "./EditModal.scss";
+import { useKeyboardHeight } from "@/store/keyboardStore";
 
 interface EditModalProps {
   visible: boolean;
@@ -11,6 +11,7 @@ interface EditModalProps {
   placeholder: string;
   initialValue: string;
   maxLength: number;
+  invalidCharacters: string;
   onSave: (value: string) => void;
   onCancel: () => void;
   validationMessage?: string;
@@ -23,46 +24,69 @@ const EditModal: React.FC<EditModalProps> = ({
   placeholder,
   initialValue,
   maxLength,
+  invalidCharacters = "",
   onSave,
   onCancel,
-  validationMessage
+  validationMessage,
 }) => {
   const [value, setValue] = useState(initialValue);
   const [isValid, setIsValid] = useState(true);
   const [isIllegal, setIsIllegal] = useState(false);
 
   // 使用全局键盘状态
-  const { keyboardHeight, isKeyboardVisible, addListener, initializeKeyboardListener } = useKeyboardHeight()
+  const {
+    keyboardHeight,
+    isKeyboardVisible,
+    addListener,
+    initializeKeyboardListener,
+  } = useKeyboardHeight();
   // 使用全局键盘状态监听
   useEffect(() => {
     // 初始化全局键盘监听器
-    initializeKeyboardListener()
+    initializeKeyboardListener();
 
     // 添加本地监听器
     const removeListener = addListener((height, visible) => {
-      console.log('AiImportPopup 收到键盘变化:', height, visible)
-    })
+      console.log("AiImportPopup 收到键盘变化:", height, visible);
+    });
 
     return () => {
-      removeListener()
-    }
-  }, [initializeKeyboardListener, addListener])
+      removeListener();
+    };
+  }, [initializeKeyboardListener, addListener]);
   useEffect(() => {
     if (visible) {
       setValue(initialValue);
-      const valid = initialValue.length >= 2 && initialValue.length <= maxLength;
+      const valid =
+        initialValue.length >= 2 && initialValue.length <= maxLength;
       setIsValid(valid);
     }
   }, [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);
 
-    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)
-    setIsIllegal(illegal)
+    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
+      );
+    setIsIllegal(illegal);
     // 验证输入
-    const valid = new_value.length >= 2 && new_value.length <= maxLength;
+    const valid =
+      new_value.length >= 2 &&
+      new_value.length <= maxLength &&
+      !createExcludeRegex(invalidCharacters).test(new_value);
     setIsValid(valid);
   };
 
@@ -70,16 +94,16 @@ const EditModal: React.FC<EditModalProps> = ({
     if (!isValid) {
       Taro.showToast({
         title: validationMessage || `请填写 2-${maxLength} 个字符`,
-        icon: 'none',
-        duration: 2000
+        icon: "none",
+        duration: 2000,
       });
       return;
     }
     if (isIllegal) {
       Taro.showToast({
         title: "输入的字符非法",
-        icon: 'none',
-        duration: 2000
+        icon: "none",
+        duration: 2000,
       });
       return;
     }
@@ -97,7 +121,16 @@ const EditModal: React.FC<EditModalProps> = ({
 
   return (
     <View className="edit_modal_overlay">
-      <View className="edit_modal_container" style={{ paddingBottom: isKeyboardVisible ? (type === 'nickname' ? `${keyboardHeight + 60}px` : `${keyboardHeight}px`) : undefined }}>
+      <View
+        className="edit_modal_container"
+        style={{
+          paddingBottom: isKeyboardVisible
+            ? type === "nickname"
+              ? `${keyboardHeight + 60}px`
+              : `${keyboardHeight}px`
+            : undefined,
+        }}
+      >
         {/* 标题栏 */}
         <View className="modal_header">
           <Text className="modal_title">{title}</Text>
@@ -113,8 +146,7 @@ const EditModal: React.FC<EditModalProps> = ({
         <View className="modal_content">
           {/* 文本输入区域 */}
           <View className="input_container">
-
-            {type === 'nickname' ? (
+            {type === "nickname" ? (
               <>
                 <Input
                   className="text_input nickname_input"
@@ -128,7 +160,13 @@ const EditModal: React.FC<EditModalProps> = ({
                   autoFocus={true}
                 />
                 <View className="char_count">
-                  <Text className={`count_text ${value.length > maxLength && "un-valid"}`}>{value.length}/{maxLength}</Text>
+                  <Text
+                    className={`count_text ${
+                      value.length > maxLength && "un-valid"
+                    }`}
+                  >
+                    {value.length}/{maxLength}
+                  </Text>
                 </View>
               </>
             ) : (
@@ -143,33 +181,40 @@ const EditModal: React.FC<EditModalProps> = ({
                   adjustPosition={false}
                 />
                 <View className="char_count">
-                  <Text className={`count_text ${value.length > maxLength && "un-valid"}`}>{value.length}/{maxLength}</Text>
+                  <Text
+                    className={`count_text ${
+                      value.length > maxLength && "un-valid"
+                    }`}
+                  >
+                    {value.length}/{maxLength}
+                  </Text>
                 </View>
               </>
             )}
           </View>
 
           {/* 验证提示 */}
-          {
-            isIllegal ?
+          {isIllegal ? (
+            <View className="validation_message">
+              <Text className="validation_text illegal">输入的字符非法</Text>
+            </View>
+          ) : (
+            !isValid && (
               <View className="validation_message">
-                <Text className="validation_text illegal">
-                  输入的字符非法
+                <Text className="validation_text">
+                  {validationMessage || `请填写 2-${maxLength} 个字符`}
                 </Text>
-              </View> :
-              !isValid && (
-                <View className="validation_message">
-                  <Text className="validation_text">
-                    {validationMessage || `请填写 2-${maxLength} 个字符`}
-                  </Text>
-                </View>
-              )
-          }
+              </View>
+            )
+          )}
         </View>
 
         {/* 底部按钮 */}
         <View className="modal_footer">
-          <View className={`save_button ${!isValid || isIllegal ? "disabled" : ""}`} onClick={handle_save}>
+          <View
+            className={`save_button ${!isValid || isIllegal ? "disabled" : ""}`}
+            onClick={handle_save}
+          >
             <Text className="save_text">保存</Text>
           </View>
         </View>
@@ -178,4 +223,4 @@ const EditModal: React.FC<EditModalProps> = ({
   );
 };
 
-export default EditModal;
+export default EditModal;