pattern在ios safari中无反应，因15.4前不支持\d、\u4e00-\u9fa5等转义和unicode范围，且title提示不稳定；须改用[0-9]、[a-za-z0-9_]及显式unicode区间，优先type="tel"，并用js监听blur+setcustomvalidity+reportvalidity补足实时反馈。
pattern在iOS Safari里为什么没反应
因为Safari 15.4之前根本不支持\d、\u4e00-\u9fa5这类转义和Unicode范围——写pattern="[\u4e00-\u9fa5]{2,4}"在旧版iOS上直接跳过校验，连报错都没有。更隐蔽的问题是：它对title属性的渲染极不稳定，很多机型提交失败时只显示“请与所要求的格式匹配”，用户根本看不到你写的提示文案。
必须做两件事：
• 把\d全换成[0-9]，\w换成[a-zA-Z0-9_]
• 中文匹配改用显式Unicode码点区间，但要砍掉高危段（比如\u9fa6-\u9fff在部分iOS版本会崩溃），稳妥起见只用[\u4e00-\u9fa5]并加required兜底
• 避免在pattern里用^和$——虽然写了也不报错，但Safari会把它当字面量处理，导致正则失效
type="tel"和type="text"在移动端pattern表现差异
type="tel"是唯一能稳定触发pattern校验的类型，尤其在iOS上：它既唤起数字键盘，又让pattern生效；而type="text"在某些iOS版本中pattern完全被忽略，哪怕正则语法完全正确。
但注意：type="number"和type="search"虽在规范里支持pattern，实测中iOS Safari对前者直接禁用pattern（浏览器先解析成数值再丢给正则，字符串已丢失），后者则对中文输入法兼容性差。
所以移动端必须：
• 优先用type="tel"，哪怕不是电话也这么写
• 如果业务强依赖数字输入（比如验证码），宁可用type="text" inputmode="numeric" + JS手动拦截非数字字符，也不要赌type="number"的pattern
如何用JS补pattern在移动端的短板
pattern只管提交时校验，但移动端用户习惯blur就反馈。得用input或blur事件接管：
• 监听blur比input更合理——避免高频触发test()拖慢输入体验
• 调用setCustomValidity("")清空旧错误，再根据new RegExp(pattern).test(value)结果设新提示
• 必须加reportValidity()主动触发原生UI反馈（否则只改状态不显示红框）
• 测试时别只输合法值，重点试123（少位）、123456789012（超长）、1a2b3c（混字母）这些边界case
pattern正则里哪些写法在移动端必崩
这些看似合理的写法，在iOS Safari上实际会静默失效或卡死：
• pattern="(?=.*[a-z])(?=.*[A-Z]).{8,}"：零宽断言（?=）不支持，整个正则被当作文本处理
• pattern="1[3-9]\d{9}"：\d在旧版iOS不识别，必须写成1[3-9][0-9]{9}
• pattern="^[a-z]+@[a-z]+\.[a-z]+$"：显式^和$在Safari里变成字面量，导致永远不匹配
• pattern="[0-9]{3}-[0-9]{4}"：如果用户输123-45678（多一位），Safari可能不报错，因为部分版本对连字符后长度校验松动
最保险的写法是：纯字符组、无高级语法、显式锚定（靠浏览器隐式加）、所有转义双写（如点号写\.而非.）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
