HTML pattern属性需用无斜杠的正则字面量语法，不支持修饰符；在线测试工具默认修饰符易误导；JS test()须与pattern逻辑一致，且注意空值处理和trim。
不能直接解决，但能大幅降低在线验证出错概率——前提是测试时用的正则和实际运行环境（浏览器、JS引擎）一致。
pattern 属性里的正则必须用字面量语法
HTML pattern 属性只接受 JavaScript 正则字面量格式（即前后加 / 的写法），不支持 new RegExp() 构造函数形式。常见错误是把调试时用的字符串写法直接粘过去：
- ❌ 错误：
pattern="^1[3-9]\d{9}$"（引号内是字符串，pattern会按字面匹配，不解释为正则） - ✅ 正确：
pattern="^1[3-9]\d{9}$"（没错，这里不用斜杠——pattern本身隐式按正则解析，但必须省略字面量的/和修饰符） - ⚠️ 注意：
pattern不支持g、i、m等修饰符，大小写敏感由正则本身控制，比如想忽略大小写就得写[a-zA-Z]
在线测试工具默认行为可能误导你
很多在线正则测试网站（如 regex101、RegExr）默认启用 g（全局）或 m（多行）修饰符，而 HTML pattern 实际只做一次匹配，且锚定整个输入值（等价于自动包裹 ^...$）。这会导致两种典型偏差：
- 测试时加了
g修饰符，结果能匹配多个子串，但pattern只关心“整个值是否完全匹配” - 测试时用了
m，换行符被当作行边界处理，而pattern默认不识别换行（用户输入框里按 Enter 一般也不会提交换行） - 验证邮箱时，
/^\w+@\w+\.\w+$/i在 regex101 里可能通过，但写进pattern得去掉/和i，变成pattern="\w+@\w+\.\w+"，否则会失败
JavaScript test() 验证必须和 pattern 保持逻辑一致
前端常同时用 pattern + JS test() 做双重校验，但两者若正则不一致，就会出现“表单提示通过、JS 却报错”这类割裂问题：
- HTML：
- JS：
const re = /^[A-Za-z0-9]{4,20}$/;→ 大小写不一致，pattern只认小写，JS 却允许大写 - 更隐蔽的问题：JS 中用了
g修饰符，test()执行后正则对象内部 lastIndex 被修改，第二次调用可能返回 false（尤其在表单反复验证时） - 建议统一写法：
const re = /^[a-z0-9]{4,20}$/;，JS 和pattern内容完全一致（去掉斜杠和修饰符）
真正容易被忽略的是：HTML5 表单验证对空值默认放行（除非加 required），而 JS test() 对空字符串返回 false —— 这个语义差异常导致“没填也报错”或“填了空格却通过”。务必在 JS 校验前先 .trim()，并在 pattern 设计时明确是否允许开头/结尾空白。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
