shanghai-residences/INPUT_VALIDATION.md

信件输入校验功能说明

功能概述

为信件模板（LetterTemplate.tsx）的输入框添加了严格的内容校验，包括：

1. 禁止英文字母 - 自动过滤并提示
2. 禁止数字 - 自动过滤并提示
3. 禁止所有标点符号和特殊符号（包括中文标点和英文标点）- 自动过滤并提示
4. 敏感词过滤 - 检测并替换为星号，提交时校验

实现细节

1. 核心函数（src/lib/utils/sensitiveWords.ts）

filterInput(input: string): string

实时过滤输入内容，在用户输入时自动去除：

• 英文字母（a-z, A-Z）
• 数字（0-9）
• 所有标点符号（包括中文标点：，。！？；：等）
• 所有特殊符号（@#$%^&*等）
• 敏感词（替换为星号）

validateInput(input: string): { valid: boolean, message: string }

提交时完整校验，返回详细的错误信息：

• 空内容检测
• 英文字母检测
• 数字检测
• 特殊符号检测
• 敏感词检测

辅助函数

• containsEnglish() - 检测是否包含英文
• containsNumber() - 检测是否包含数字
• containsSpecialChars() - 检测是否包含标点符号或特殊符号（包括中文标点）
• containsSensitiveWord() - 检测是否包含敏感词

2. 敏感词库

已扩展的敏感词库包括：

• 基础不文明用语
• 暴力相关词汇
• 违法违规内容
• 歧视性用语

可根据实际需求在 SENSITIVE_WORDS 数组中扩展。

3. 用户体验

实时过滤

用户输入时：

• 中文输入法支持：在输入拼音时不会被过滤，等用户选择中文后才进行过滤
• 英文字母、数字、所有标点符号和特殊符号 会被立即删除（用户无法输入）
• 敏感词 会被替换为星号（例如："垃圾" → "**"）
• 中文字符 可以正常输入

示例：

• 输入 "你好abc123世界" → 实时显示 "你好世界"
• 输入 "测试垃圾内容" → 实时显示 "测试**内容"
• 输入 "你好，世界！" → 实时显示 "你好世界"（标点被过滤）
• 使用中文输入法输入 "nihao" → 看到拼音 → 选择"你好" → 显示"你好" ✅

提交校验

当用户点击提交时：

• 如果内容包含被禁止的字符或敏感词，会显示相应提示
• 错误的输入框会清空并标红
• 用户需要重新填写

允许的内容

• ✅ 纯中文字符（汉字）
• ✅ 空格
• ❌ 英文字母（自动删除）
• ❌ 数字（自动删除）
• ❌ 所有标点符号（包括中文标点如，。！？；：等，自动删除）
• ❌ 所有特殊符号（@#$%^&*等，自动删除）
• ⚠️ 敏感词（替换为星号 * ）

测试

所有校验函数都已通过测试：

• ✓ 英文字母检测和过滤
• ✓ 数字检测和过滤
• ✓ 特殊符号检测和过滤
• ✓ 敏感词检测和过滤
• ✓ 中文标点符号保留
• ✓ 完整的提交校验流程

使用示例

import { filterInput, validateInput } from '@/lib/utils/sensitiveWords'

// 实时过滤
const handleChange = (value: string) => {
  const filtered = filterInput(value) // 自动过滤英文、数字、特殊符号、敏感词
  setValue(filtered)
}

// 提交前校验
const handleSubmit = () => {
  const result = validateInput(value)
  if (!result.valid) {
    showHint(result.message)
    return
  }
  // 继续提交逻辑
}

配置选项

在 LetterFieldConfig 中可以通过 sanitize 字段控制是否启用校验：

const field: LetterFieldConfig = {
  type: 'input',
  sanitize: true,  // 默认启用校验
  // sanitize: false, // 禁用校验（不建议）
}

注意事项

1. 落款姓名 也会进行相同的校验
2. 中文输入法支持 - 使用 onCompositionStart 和 onCompositionEnd 事件处理中文输入法，确保拼音输入过程不会被过滤
3. 敏感词库 需要定期维护和更新
4. 如果需要添加更多敏感词，请在 sensitiveWords.ts 的 SENSITIVE_WORDS 数组中添加
5. 所有标点符号（包括中文标点）都会被过滤