最可靠方式是监听input事件实时过滤/和，因pattern仅提交时校验且移动端支持弱；需用/[\/]/g正则替换并手动维护光标位置；服务端必须重复校验并考虑unicode变体及路径遍历风险。
直接禁止用户输入正斜杠 / 和反斜杠 ，最可靠的方式是监听 input 事件并实时清理值——pattern 属性只能在提交时校验，拦不住粘贴、IME 输入或手动修改。
为什么 pattern 属性对 / 校验无效
pattern 只在表单调用 checkValidity() 或触发 submit 时生效，不阻止输入行为。用户仍可粘贴 file/name est，浏览器不会拦截，也不会自动清空。更关键的是：正则中反斜杠需双重转义，但 pattern 值本身是字符串，不带字面量斜杠，容易写错成 pattern="[/\]"（实际应为 pattern="[^/\\]+"），且移动端（尤其 iOS Safari）对 pattern 支持极弱。
用 input 事件 + replace 实时过滤 / 和
监听 input 事件，在每次输入后立即移除非法字符，并保持光标位置。核心是避免用 keypress（无法处理粘贴、右键粘、中文输入法上屏）。
- 正则必须写成
/[\/]/g：第一个转义第二个/，第二个转义反斜杠本身；也可写成/[/\\]/g更直白 - 必须调用
setSelectionRange重置光标，否则光标会跳到末尾 - 不能在事件中直接改
e.target.value后调e.preventDefault()（无效）
const input = document.querySelector('input[name="afterName"]');
input.addEventListener('input', function(e) {
const raw = e.target.value;
const cleaned = raw.replace(/[\/]/g, '');
if (cleaned !== raw) {
const pos = e.target.selectionStart;
e.target.value = cleaned;
const offset = raw.length - cleaned.length;
e.target.setSelectionRange(pos - offset, pos - offset);
}
});
服务端必须重复校验 / 和
前端过滤纯属体验优化。禁用 JS、绕过监听、抓包重放、curl 直传都能轻易绕过。后端收到值后，必须用相同逻辑检查：if (value.includes('/') || value.includes('\')) 或等价正则。常见疏漏：
- 只校验提交时的
req.body，却忽略 URL 路径参数或查询参数里的非法符号 - 用
indexOf检查但没处理 Unicode 正斜杠（如／U+FF0F）或全角反斜杠（＼U+FF3C） - 文件名场景下，未同步过滤
..、../等路径遍历组合
真正难的不是写正则，而是意识到：只要涉及文件名、路径、SQL 字段名、JSON key 这类上下文，/ 和 往往只是冰山一角——你需要一整套字符白名单策略，而不是零星过滤几个符号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
