HTML input 的 pattern 属性应直接写 JavaScript 风格正则（如 [a-zA-Z0-9]+），自动全匹配，勿加 ^$；必须配 title 提示，需 required + 后端双重校验，复杂规则须 JS 补充。
input pattern 属性直接写正则，但注意浏览器默认行为
HTML 原生表单校验英文数字混合，最简单有效的方式是用 pattern 属性。它接受一个 JavaScript 风格正则（不带 /g 标志，也不加开头结尾的斜杠），且**自动全匹配**（等价于 ^...$）。别自己加 ^ 和 $，否则可能失效。
常见错误是写成 pattern="^[a-zA-Z0-9]+$" —— 这反而会因双重锚定导致校验失败。正确写法是：
<input type="text" pattern="[a-zA-Z0-9]+" title="只能输入英文和数字">
-
pattern="[a-zA-Z0-9]+"：允许至少一个英文字母或数字，不允许空格、下划线、中文等 -
title属性不是可选的——它是校验失败时浏览器显示的提示文案，必须写，否则用户看不到错误原因 - 该正则不区分大小写，但不会自动转换输入值；如需强制小写，得靠 JS 后续处理
- 移动端键盘类型不会自动切换（比如不会弹出“英文数字键盘”），
inputmode="text"或inputmode="verbatim"也无实质帮助
要限制长度或排除特定组合？改 pattern 值就行
原生 pattern 支持大部分基础正则语法，但不支持前瞻断言（(?=...)）、捕获组或 Unicode 类别（如 \p{L}）。所以复杂逻辑得靠 JS 补充。
例如：“6–12位，必须同时含英文和数字”无法单靠 pattern 完成，但可以拆解为两个轻量级约束：
立即学习“前端免费学习笔记（深入）”；
<input type="text" pattern="[a-zA-Z0-9]{6,12}" title="请输入6–12位英文或数字">
-
[a-zA-Z0-9]{6,12}：控制总长度，且只允许英文数字 - “必须同时包含两者”需额外 JS 监听
input或blur事件，用/[a-zA-Z]/.test(val) && /[0-9]/.test(val)判断 - 注意：IE 不支持
pattern，如需兼容，JS 校验是唯一可靠路径
提交时被绕过？必须配合 required 和后端双重校验
pattern 是纯前端提示，用户禁用 JS、手动修改 DOM、或用 curl/postman 提交，都能跳过它。所以：
- 务必加
required属性，防止空提交 - 服务端必须用相同规则（或更严）重新校验，比如 Node.js 中用
/^[a-zA-Z0-9]{6,12}$/.test(input) - 不要信任
input.value的原始值——用户可能粘贴了不可见字符（如零宽空格），建议先.trim()再校验 - 如果字段用于用户名、token 等敏感场景，还需考虑黑名单词、频率限制等，正则只是第一道过滤
为什么不用 oninput + 正则实时替换？容易误伤输入体验
有人喜欢在 oninput 里用 val.replace(/[^a-zA-Z0-9]/g, '') 强制过滤，但这会导致几个实际问题：
- 中文输入法未上屏时就触发替换，导致拼音串被清空，用户无法正常打字
- 光标位置错乱，尤其在中间编辑时，删除或插入后光标常跳到末尾
- 移动端软键盘频繁收起/弹出，体验断裂
- 真正需要的是“校验”而非“清洗”，应把干预点放在提交前或失焦时
如果确实要过滤，推荐用 beforeinput 事件（Chrome 69+）并检查 event.inputType === 'insertText'，但兼容性仍有限，生产环境慎用。
正则本身很简单，难的是边界处理和用户预期对齐——比如是否允许大写字母、是否接受空字符串、粘贴内容怎么对待。这些细节没想清楚，pattern 写得再准也没用。
