pattern属性可原生校验输入格式，仅对text/search/tel/email/url/password有效，需配合title提示，不支持number类型，且移动端safari兼容性差，后端仍须二次校验。
用 input 的 pattern 属性做前端字符类型限制
HTML 原生就支持在提交前校验输入内容是否匹配正则，pattern 是最轻量、无需 JS 就能触发浏览器默认提示的方式。它只对 type="text"、"search"、"tel"、"email"、"url" 和 "password" 有效（注意：type="number" 不支持 pattern）。
常见写法示例：
<input type="text" pattern="[a-zA-Z0-9_]+" title="仅允许字母、数字和下划线">
关键点：
-
pattern值是正则表达式字面量，**不要加/开头结尾**，也不加^或$—— 浏览器会自动全量匹配 -
title属性会在验证失败时显示为 tooltip 提示，务必写清楚规则，否则用户只看到“请与所要求的格式匹配”这种模糊信息 - 移动端 Safari 对
pattern支持较弱，部分机型可能完全不触发校验，不能单独依赖
用 oninput + replace() 实时过滤非法字符
如果需求是「用户一输错就立刻删掉」，比如只允许中文姓名，或强制小写邮箱本地部分，就得用 JS 拦截输入事件。核心思路是：监听 oninput，对 value 做正则替换，再赋值回去。
示例（只保留中文、英文字母、空格）：
<input type="text" oninput="this.value = this.value.replace(/[^\u4e00-\u9fa5a-zA-Z\s]/g, '')">
注意细节：
- 用
oninput而不是onchange，后者只在失焦时触发，无法实时响应 - 正则中使用双反斜杠
\u4e00，因为 HTML 属性值里单反斜杠会被转义 - 直接修改
this.value会导致光标跳到末尾；如需保留光标位置，得额外记录selectionStart，复杂度陡增 —— 大多数场景可接受跳转
后端必须校验，前端限制只是体验优化
所有前端限制都能被绕过：禁用 JS、改 DOM、用 curl 直接 POST。所以 pattern 和 oninput 都只是防误操作，不是安全边界。
后端收到数据后，仍需用对应语言的正则或白名单函数做二次校验：
- PHP：用
preg_match()配合严格模式 - Python：用
re.fullmatch(r'^[a-z0-9_]+$', value) - Node.js：用
!/^[a-z0-9_]+$/.test(value)判断不匹配 - 特别注意 Unicode 边界：比如
w在 JS 中包含下划线但不含中文，而 Python 的w默认含中文（取决于 flag），别想当然复用正则
遇到 submit 时不触发校验？检查这三点
表单点了提交却没弹出 pattern 提示，大概率是以下原因：
- 按钮是
<button></button>且没设type="submit"，默认是type="button"，不会触发表单校验 - input 上写了
required，但用户输入了空格 ——required对纯空白字符视为未填写，此时pattern根本不执行 - form 设置了
novalidate属性，显式关闭了浏览器原生校验
最稳妥的调试方式：在控制台手动调用 form.checkValidity()，看返回 true 还是 false，再查具体哪个字段 validity.patternMismatch === true。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
