HTML pattern属性无法用于敏感词过滤，因其仅支持全字符串精确匹配（自动锚定^$），不支持“包含某词”逻辑；敏感词需用JavaScript监听input事件，结合includes()或RegExp动态检测并调用setCustomValidity()控制校验状态。
HTML pattern 属性完全不能用于敏感词过滤——它只做全字符串匹配，且不支持“包含某词”这类逻辑。
为什么 pattern 对敏感词无效
浏览器对 pattern 的处理是自动加 ^ 和 $ 做**全字符串精确匹配**。你写 pattern="黑客"，实际等价于 ^黑客$，意思是“整个输入必须**刚好等于**‘黑客’两个字”，而不是“只要包含‘黑客’就报错”。这和敏感词拦截的目标完全相反。
常见误用现象：
- 用户输“我讨厌黑客攻击”，
pattern依然通过（因为不等于“黑客”） - 写了
pattern=".*黑客.*"，但.*开头结尾在 pattern 中被浏览器静默忽略或降权，规则失效 - 想用
pattern拦截多个词（如“黑客|病毒|木马”），浏览器不支持|分支语法，直接当字面字符串匹配
必须用 JavaScript 实现的三个关键点
敏感词校验本质是“检测子串是否存在”，只能靠 JS 的 test() 或 includes() 动态判断。以下是最小可行方案：
立即学习“前端免费学习笔记（深入）”；
- 监听
input或blur事件，而非依赖表单提交 - 用
RegExp构造带g标志的正则（如/黑客|病毒|木马/gi），或更稳妥地用Array.some(word => value.includes(word)) - 调用
setCustomValidity()主动设置错误状态，否则checkValidity()始终返回true
示例代码：
const input = document.querySelector('input[name="content"]');
const bannedWords = ['黑客', '病毒', '木马', '非法'];
input.addEventListener('input', () => {
const value = input.value;
const hasBanned = bannedWords.some(word => value.includes(word));
input.setCustomValidity(hasBanned ? '包含禁止词汇，请修改' : '');
});
移动端和 Safari 的兼容性陷阱
iOS Safari 对中文 Unicode 范围（如 [u4e00-u9fa5]）支持极差，但敏感词过滤本身不依赖 Unicode 范围——直接用字符串 includes() 最稳。需注意：
- 不要试图用
pattern+ 中文正则兜底，它在 Safari 下大概率静默失效 - 如果词库很大（上百个词），
includes()循环性能尚可；若达千级，建议预编译为单个RegExp，但注意new RegExp(words.join('|'), 'gi')中特殊字符要先escape -
inputmode="text"必须显式设置，避免 iOS 键盘强制切换为数字/URL 模式，导致用户无法输入中文词
后端才是最终防线，前端只是体验层
所有前端校验都可绕过。用户禁用 JS、用 curl 提交、甚至直接改 DOM，都能跳过你的敏感词检查。所以：
- JS 只负责实时提示和阻断普通用户误操作
- 后端收到数据后，必须用相同词库+相同逻辑（推荐 DFA 算法或成熟库如
node-bad-words）重新扫描 - 尤其注意：前端过滤不处理富文本中的 HTML 标签、Unicode 零宽空格、同音字变体（如“黑ke”），这些必须由服务端识别
真正容易被忽略的是词边界——比如“黑客”该不该拦“白客”？“病毒”该不该拦“病原体”？这种语义判断不在正则能力范围内，得靠分词或 NLP，前端连碰都不该碰。
