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

2025-11-26 16:58:32 +08:00
parent 6751ec3c00
commit c471b90ecf
3 changed files with 318 additions and 273 deletions
--- a/src/components/EditModal/index.tsx
+++ b/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;
--- a/src/components/UserInfo/index.tsx
+++ b/src/components/UserInfo/index.tsx
@@ -76,7 +76,6 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
  set_user_info,
  onTab,
 }) => {
-
  const { setShowGuideBar } = useGlobalState();
  const { updateUserInfo } = useUserActions();

@@ -383,7 +382,14 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({

      {/* 统计数据 */}
      <View className="stats_section">
-        <View className="stats_container" style={{ marginBottom: `${collapseProfile && setMarginBottom ? "16px" : "unset"}` }}>
+        <View
+          className="stats_container"
+          style={{
+            marginBottom: `${
+              collapseProfile && setMarginBottom ? "16px" : "unset"
+            }`,
+          }}
+        >
          <View
            className="stat_item clickable"
            onClick={() => handle_stats_click("following")}
@@ -461,121 +467,118 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
      </View>

      {/* 标签和简介 */}
-      {
-        !collapseProfile ?
-          <View className="tags_bio_section">
-            <View className="tags_container">
-              {user_info.gender && user_info.gender !== "2" ? (
-                <View className="tag_item">
-                  {user_info.gender === "0" && (
-                    <Image
-                      className="tag_icon"
-                      src={require("../../static/userInfo/male.svg")}
-                      onClick={() => {
-                        editable && handle_open_edit_modal("gender");
-                      }}
-                    />
-                  )}
-                  {user_info.gender === "1" && (
-                    <Image
-                      className="tag_icon"
-                      src={require("../../static/userInfo/female.svg")}
-                      onClick={() => {
-                        editable && handle_open_edit_modal("gender");
-                      }}
-                    />
-                  )}
-                </View>
-              ) : is_current_user && user_info.gender !== "2" ? (
-                <View
-                  className="button_edit"
-                  onClick={() => {
-                    handle_open_edit_modal("gender");
-                  }}
-                >
-                  <Text>选择性别</Text>
-                </View>
-              ) : null}
-              {user_info.ntrp_level !== "" ? (
-                <View
-                  className="tag_item"
-                  onClick={() => {
-                    editable && handle_open_edit_modal("ntrp_level");
-                  }}
-                >
-                  <Text className="tag_text">{`NTRP ${formatNtrpDisplay(
-                    user_info.ntrp_level
-                  )}`}</Text>
-                </View>
+      {!collapseProfile ? (
+        <View className="tags_bio_section">
+          <View className="tags_container">
+            {user_info.gender && user_info.gender !== "2" ? (
+              <View className="tag_item">
+                {user_info.gender === "0" && (
+                  <Image
+                    className="tag_icon"
+                    src={require("../../static/userInfo/male.svg")}
+                    onClick={() => {
+                      editable && handle_open_edit_modal("gender");
+                    }}
+                  />
+                )}
+                {user_info.gender === "1" && (
+                  <Image
+                    className="tag_icon"
+                    src={require("../../static/userInfo/female.svg")}
+                    onClick={() => {
+                      editable && handle_open_edit_modal("gender");
+                    }}
+                  />
+                )}
+              </View>
+            ) : is_current_user && user_info.gender !== "2" ? (
+              <View
+                className="button_edit"
+                onClick={() => {
+                  handle_open_edit_modal("gender");
+                }}
+              >
+                <Text>选择性别</Text>
+              </View>
+            ) : null}
+            {user_info.ntrp_level !== "" ? (
+              <View
+                className="tag_item"
+                onClick={() => {
+                  editable && handle_open_edit_modal("ntrp_level");
+                }}
+              >
+                <Text className="tag_text">{`NTRP ${formatNtrpDisplay(
+                  user_info.ntrp_level
+                )}`}</Text>
+              </View>
+            ) : is_current_user ? (
+              <View
+                className="button_edit"
+                onClick={() => {
+                  handle_open_edit_modal("ntrp_level");
+                }}
+              >
+                <Text>测测你的NTRP水平</Text>
+              </View>
+            ) : null}
+            {user_info.occupation ? (
+              <View
+                className="tag_item"
+                onClick={() => {
+                  editable && handle_open_edit_modal("occupation");
+                }}
+              >
+                <Text className="tag_text">
+                  {user_info.occupation.split(" ")[2]}
+                </Text>
+              </View>
+            ) : is_current_user ? (
+              <View
+                className="button_edit"
+                onClick={() => {
+                  handle_open_edit_modal("occupation");
+                }}
+              >
+                <Text>选择职业</Text>
+              </View>
+            ) : null}
+            {user_info.country || user_info.province || user_info.city ? (
+              <View
+                className="tag_item"
+                onClick={() => editable && handle_open_edit_modal("location")}
+              >
+                <Text className="tag_text">{`${user_info.province}${user_info.city}`}</Text>
+              </View>
+            ) : is_current_user ? (
+              <View
+                className="button_edit"
+                onClick={() => handle_open_edit_modal("location")}
+              >
+                <Text>选择地区</Text>
+              </View>
+            ) : null}
+          </View>
+          <View
+            className="personal_profile"
+            onClick={() => handle_open_edit_modal("personal_profile")}
+          >
+            {!collapseProfile ? (
+              user_info.personal_profile ? (
+                <Text className="bio_text">{user_info.personal_profile}</Text>
              ) : is_current_user ? (
-                <View
-                  className="button_edit"
-                  onClick={() => {
-                    handle_open_edit_modal("ntrp_level");
-                  }}
-                >
-                  <Text>测测你的NTRP水平</Text>
+                <View className="personal_profile_edit">
+                  <Image
+                    className="edit_icon"
+                    src={require("../../static/userInfo/info_edit.svg")}
+                  />
+                  <Text className="bio_text">点击添加简介，让更多人了解你</Text>
                </View>
-              ) : null}
-              {user_info.occupation ? (
-                <View
-                  className="tag_item"
-                  onClick={() => {
-                    editable && handle_open_edit_modal("occupation");
-                  }}
-                >
-                  <Text className="tag_text">
-                    {user_info.occupation.split(" ")[2]}
-                  </Text>
-                </View>
-              ) : is_current_user ? (
-                <View
-                  className="button_edit"
-                  onClick={() => {
-                    handle_open_edit_modal("occupation");
-                  }}
-                >
-                  <Text>选择职业</Text>
-                </View>
-              ) : null}
-              {user_info.country || user_info.province || user_info.city ? (
-                <View
-                  className="tag_item"
-                  onClick={() => editable && handle_open_edit_modal("location")}
-                >
-                  <Text className="tag_text">{`${user_info.province}${user_info.city}`}</Text>
-                </View>
-              ) : is_current_user ? (
-                <View
-                  className="button_edit"
-                  onClick={() => handle_open_edit_modal("location")}
-                >
-                  <Text>选择地区</Text>
-                </View>
-              ) : null}
-            </View>
-            <View
-              className="personal_profile"
-              onClick={() => handle_open_edit_modal("personal_profile")}
-            >
-              {!collapseProfile ?
-                user_info.personal_profile ? (
-                  <Text className="bio_text">{user_info.personal_profile}</Text>
-                ) : is_current_user ? (
-                  <View className="personal_profile_edit">
-                    <Image
-                      className="edit_icon"
-                      src={require("../../static/userInfo/info_edit.svg")}
-                    />
-                    <Text className="bio_text">点击添加简介，让更多人了解你</Text>
-                  </View>
-                ) :
-                  null :
-                null}
-            </View>
-          </View> :
-          null
-      }
+              ) : null
+            ) : null}
+          </View>
+        </View>
+      ) : null}

      {/* 编辑个人简介弹窗 */}
      <EditModal
@@ -589,11 +592,12 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
        }
        initialValue={form_data[editing_field as keyof typeof form_data] || ""}
        maxLength={editing_field === "nickname" ? 20 : 100}
+        invalidCharacters={editing_field === "nickname" ? "@<>/" : ""}
        onSave={handle_edit_modal_save}
        onCancel={handle_edit_modal_cancel}
        validationMessage={
          editing_field === "nickname"
-            ? "请填写 1-20 个字符"
+            ? "请填写 2-24 个字符，不包括 @<>/等无效字符"
            : "请填写 2-100 个字符"
        }
      />
@@ -663,7 +667,9 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
          visible={ntrp_picker_visible}
          setvisible={setNtrpPickerVisible}
          value={
-            !form_data.ntrp_level || form_data.ntrp_level === "0" ? ["3.0"] : [form_data.ntrp_level]
+            !form_data.ntrp_level || form_data.ntrp_level === "0"
+              ? ["3.0"]
+              : [form_data.ntrp_level]
          }
          onChange={handle_ntrp_level_change}
        />
@@ -842,8 +848,9 @@ export const GameTabs: React.FC<GameTabsProps> = ({
          <Text className="tab_text">{hosted_text}</Text>
        </View>
        <View
-          className={`tab_item ${active_tab === "participated" ? "active" : ""
-            }`}
+          className={`tab_item ${
+            active_tab === "participated" ? "active" : ""
+          }`}
          onClick={() => on_tab_change("participated")}
        >
          <Text className="tab_text">{participated_text}</Text>