pattern仅支持text、search、tel、url、email、password六种type，安全提问答案宜用text（明文输入）或password（密文），但type="number"和textarea不支持；正则须写裸字符串（禁斜杠/^$/）、正确处理unicode与连字符，且必须配title提示，而语义校验、敏感词拦截、跨字段比对等必须由javascript实现。
HTML输入框不能用 pattern 直接校验“安全提问答案”这类语义化、无固定格式的字段——它只做字符串模式匹配，不理解业务含义，也不支持跨字段、上下文或敏感词拦截。
哪些 type 支持 pattern 且能用于答案类输入
pattern 仅对 text、search、tel、url、email、password 六种 type 生效。安全提问答案通常用 text 或 password，所以可以配 pattern 做基础约束，但必须清楚它的边界：
-
type="text"✅ 可用，原始字符串传入正则，适合限制长度、禁用空格/特殊字符等 -
type="password"✅ 可用，但用户看不到输入内容，不利于纠错；若答案本身需明文（如“你小学班主任名字”），就不该用 password -
type="number"❌ 无效，浏览器会先转成数字，前导零被吃掉，正则收不到原始字符串 -
type="textarea"❌ 不支持pattern属性，必须用 JS 校验
pattern 中的正则怎么写才真正生效
浏览器自动把你的 pattern 值包裹成 ^(?:...)$，所以你只需写核心部分，不能带 JS 正则语法：
- ✅ 正确：
pattern="[a-zA-Z0-9\u4e00-\u9fa5]{2,20}"（允许中英文数字，2–20 字） - ✅ 正确：
pattern="[^\"'&;]{1,50}"（排除常见 XSS 字符，1–50 字） - ❌ 错误：
pattern="/^[a-z]+$/i"→ 斜杠和i修饰符被当作文本字面匹配，永远失败 - ❌ 错误：
pattern="^[^&'\";]+$"→^和$冗余，旧版 Safari 可能跳过整条规则 - ❌ 错误：
pattern="\d{4}"→ 缺少反斜杠转义，实际解析为字面量d{4}
为什么光靠 pattern 不够，必须加 JavaScript
安全提问答案校验常涉及以下场景，pattern 完全无法覆盖：
- 答案与问题语义强相关（如问题“你第一辆车品牌”，答案填“苹果”显然不合理，但
pattern拦不住） - 禁止常见弱答案（如“123456”、“password”、“admin”），需 JS 维护黑名单数组
- 答案与注册邮箱/用户名高度相似（如邮箱
zhangsan@xx.com，答案填zhangsan），需 JS 比对 - 实时提示（
input事件中高亮+文字反馈），pattern只在提交时触发 - 调用后端接口查答案是否过于常见（如“生日”“妈妈名字”类答案命中率过高），必须 JS 发请求
title 是唯一可控的错误提示出口，别写“格式错误”
没设 title，Chrome/Firefox 默认提示是“请与所要求的格式匹配”，用户完全不知道要输什么。而 title 是唯一能在气泡、hover、input.validationMessage 中复用的内容：
- ✅ 推荐：
title="请填写2–20个字，不要用空格、尖括号或引号" - ✅ 推荐：
title="避免使用生日、手机号、常见密码等易猜答案"（配合 JS 黑名单） - ❌ 无效：
title="格式错误"—— 用户仍不知道错在哪 - iOS Safari 对
title支持弱，若需强提示，必须用 JS 的setCustomValidity()补充
真正关键的不是正则写得多漂亮，而是想清楚：这个答案字段有没有被当成 XSS 注入点？有没有被批量撞库利用？pattern 只拦得住随手乱输，拦不住有备而来的攻击者——后端必须重复校验，且规则要和前端一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
