bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ultrame
2025-11-26 16:58:32 +08:00
parent 6751ec3c00
commit c471b90ecf
3 changed files with 318 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/components/EditModal/index.tsx
View File

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

35
src/components/UserInfo/index.tsx
View File

@@ -76,7 +76,6 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
set_user_info, set_user_info,
onTab, onTab,
}) => { }) => {
const { setShowGuideBar } = useGlobalState(); const { setShowGuideBar } = useGlobalState();
const { updateUserInfo } = useUserActions(); const { updateUserInfo } = useUserActions();
@@ -383,7 +382,14 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
{/* 统计数据 */} {/* 统计数据 */}
<View className="stats_section"> <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 <View
className="stat_item clickable" className="stat_item clickable"
onClick={() => handle_stats_click("following")} onClick={() => handle_stats_click("following")}
@@ -461,8 +467,7 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
</View> </View>
{/* 标签和简介 */} {/* 标签和简介 */}
{ {!collapseProfile ? (
!collapseProfile ?
<View className="tags_bio_section"> <View className="tags_bio_section">
<View className="tags_container"> <View className="tags_container">
{user_info.gender && user_info.gender !== "2" ? ( {user_info.gender && user_info.gender !== "2" ? (
@@ -558,7 +563,7 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
className="personal_profile" className="personal_profile"
onClick={() => handle_open_edit_modal("personal_profile")} onClick={() => handle_open_edit_modal("personal_profile")}
> >
{!collapseProfile ? {!collapseProfile ? (
user_info.personal_profile ? ( user_info.personal_profile ? (
<Text className="bio_text">{user_info.personal_profile}</Text> <Text className="bio_text">{user_info.personal_profile}</Text>
) : is_current_user ? ( ) : is_current_user ? (
@@ -569,13 +574,11 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
/> />
<Text className="bio_text">点击添加简介，让更多人了解你</Text> <Text className="bio_text">点击添加简介，让更多人了解你</Text>
</View> </View>
) : ) : null
null : ) : null}
null}
</View> </View>
</View> : </View>
null ) : null}
}
{/* 编辑个人简介弹窗 */} {/* 编辑个人简介弹窗 */}
<EditModal <EditModal
@@ -589,11 +592,12 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
} }
initialValue={form_data[editing_field as keyof typeof form_data] || ""} initialValue={form_data[editing_field as keyof typeof form_data] || ""}
maxLength={editing_field === "nickname" ? 20 : 100} maxLength={editing_field === "nickname" ? 20 : 100}
invalidCharacters={editing_field === "nickname" ? "@<>/" : ""}
onSave={handle_edit_modal_save} onSave={handle_edit_modal_save}
onCancel={handle_edit_modal_cancel} onCancel={handle_edit_modal_cancel}
validationMessage={ validationMessage={
editing_field === "nickname" editing_field === "nickname"
? "请填写 1-20 个字符" ? "请填写 2-24 个字符，不包括 @<>/等无效字符"
: "请填写 2-100 个字符" : "请填写 2-100 个字符"
} }
/> />
@@ -663,7 +667,9 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
visible={ntrp_picker_visible} visible={ntrp_picker_visible}
setvisible={setNtrpPickerVisible} setvisible={setNtrpPickerVisible}
value={ 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} onChange={handle_ntrp_level_change}
/> />
@@ -842,7 +848,8 @@ export const GameTabs: React.FC<GameTabsProps> = ({
<Text className="tab_text">{hosted_text}</Text> <Text className="tab_text">{hosted_text}</Text>
</View> </View>
<View <View
className={`tab_item ${active_tab === "participated" ? "active" : "" className={`tab_item ${
active_tab === "participated" ? "active" : ""
}`} }`}
onClick={() => on_tab_change("participated")} onClick={() => on_tab_change("participated")}
> >

45
src/user_pages/edit/index.tsx
View File

@@ -416,8 +416,8 @@ const EditProfilePage: React.FC = () => {
}; };
const handleAddGroup = () => { const handleAddGroup = () => {
console.log("加入社群～") console.log("加入社群～");
} };
const getDefaultOption = (options) => { const getDefaultOption = (options) => {
if (!Array.isArray(options) || options.length === 0) { if (!Array.isArray(options) || options.length === 0) {
@@ -710,7 +710,9 @@ const EditProfilePage: React.FC = () => {
<View className="logout_section group"> <View className="logout_section group">
<View className="logout_button" onClick={handleCustomerService}> <View className="logout_button" onClick={handleCustomerService}>
<Image src={require("@/static/wallet/custom-service.svg")}></Image> <Image
src={require("@/static/wallet/custom-service.svg")}
></Image>
<Text className="logout_text">客服聊天</Text> <Text className="logout_text">客服聊天</Text>
</View> </View>
<View className="logout_button" onClick={handleAddGroup}> <View className="logout_button" onClick={handleAddGroup}>
@@ -747,18 +749,18 @@ const EditProfilePage: React.FC = () => {
: "介绍一下你的喜好，或者训练习惯" : "介绍一下你的喜好，或者训练习惯"
} }
initialValue={form_data[editing_field as keyof typeof form_data] || ""} initialValue={form_data[editing_field as keyof typeof form_data] || ""}
maxLength={editing_field === "nickname" ? 20 : 100} maxLength={editing_field === "nickname" ? 24 : 100}
invalidCharacters={editing_field === "nickname" ? "@<>/" : ""}
onSave={handle_edit_modal_save} onSave={handle_edit_modal_save}
onCancel={handle_edit_modal_cancel} onCancel={handle_edit_modal_cancel}
validationMessage={ validationMessage={
editing_field === "nickname" editing_field === "nickname"
? "请填写 1-20 个字符" ? "请填写 2-24 个字符，不包括 @<>/等无效字符"
: "请填写 2-100 个字符" : "请填写 2-100 个字符"
} }
/> />
{/* 性别选择弹窗 */} {/* 性别选择弹窗 */}
{ {gender_picker_visible && (
gender_picker_visible && (
<PopupPicker <PopupPicker
showHeader={true} showHeader={true}
title="选择性别" title="选择性别"
@@ -775,11 +777,9 @@ const EditProfilePage: React.FC = () => {
value={form_data.gender === "" ? ["0"] : [form_data.gender]} value={form_data.gender === "" ? ["0"] : [form_data.gender]}
onChange={handle_gender_change} onChange={handle_gender_change}
/> />
) )}
}
{/* 生日选择弹窗 */} {/* 生日选择弹窗 */}
{ {birthday_picker_visible && (
birthday_picker_visible && (
<PopupPicker <PopupPicker
minYear={1970} minYear={1970}
maxYear={new Date().getFullYear()} maxYear={new Date().getFullYear()}
@@ -796,11 +796,9 @@ const EditProfilePage: React.FC = () => {
type="day" type="day"
onChange={handle_birthday_change} onChange={handle_birthday_change}
/> />
) )}
}
{/* 地区选择弹窗 */} {/* 地区选择弹窗 */}
{ {location_picker_visible && (
location_picker_visible && (
<PopupPicker <PopupPicker
showHeader={true} showHeader={true}
title="选择地区" title="选择地区"
@@ -815,11 +813,9 @@ const EditProfilePage: React.FC = () => {
} }
onChange={handle_location_change} onChange={handle_location_change}
/> />
) )}
}
{/* NTRP水平选择弹窗 */} {/* NTRP水平选择弹窗 */}
{ {ntrp_picker_visible && (
ntrp_picker_visible && (
<PopupPicker <PopupPicker
showHeader={true} showHeader={true}
title="选择 NTRP 自评水平" title="选择 NTRP 自评水平"
@@ -844,11 +840,9 @@ const EditProfilePage: React.FC = () => {
} }
onChange={handle_ntrp_level_change} onChange={handle_ntrp_level_change}
/> />
) )}
}
{/* 职业选择弹窗 */} {/* 职业选择弹窗 */}
{ {occupation_picker_visible && (
occupation_picker_visible && (
<PopupPicker <PopupPicker
showHeader={true} showHeader={true}
title="选择职业" title="选择职业"
@@ -863,8 +857,7 @@ const EditProfilePage: React.FC = () => {
} }
onChange={handle_occupation_change} onChange={handle_occupation_change}
/> />
) )}
}
{/* 取消关注确认弹窗 */} {/* 取消关注确认弹窗 */}
<CommonDialog <CommonDialog
visible={showLogoutDialog} visible={showLogoutDialog}
@@ -877,7 +870,7 @@ const EditProfilePage: React.FC = () => {
contentTitle="确定要注销账号吗？" contentTitle="确定要注销账号吗？"
contentDesc="你的账号将会彻底删除，该操作不可恢复。" contentDesc="你的账号将会彻底删除，该操作不可恢复。"
/> />
</View > </View>
); );
}; };