浏览器默认pattern校验失败仅显示title提示，无法自定义弹窗；需用JavaScript监听submit事件，调用checkValidity()和validity.patternMismatch判断并alert提示，同时preventDefault阻止提交。
pattern校验失败时浏览器默认只显示title提示，不能弹窗
HTML原生的pattern属性不支持自定义弹窗（alert、confirm等），它只会在表单提交失败时触发浏览器内置的 tooltip 提示——这个提示内容完全来自title属性，且无法用CSS控制样式或改成弹窗。想弹出alert，必须用JavaScript拦截并手动处理。
用checkValidity() + setCustomValidity()接管提示逻辑
核心思路是：不让浏览器走默认校验流程，而是监听submit事件，调用checkValidity()判断，失败时用alert()或自定义UI提示，并return false阻止提交。
- 必须在
form上监听submit事件，不能只监听按钮点击 - 对每个需要校验的
input，先调用checkValidity()，再查validity.patternMismatch确认是否因pattern失败 - 一旦发现
patternMismatch === true，立即alert()并return false - 注意：调用
setCustomValidity("xxx")后，checkValidity()才可能返回false；清空提示得设为空字符串setCustomValidity("")
示例：
<script> document.getElementById("myForm").addEventListener("submit", function(e) { const input = document.getElementById("code"); if (!input.checkValidity()) { if (input.validity.patternMismatch) { alert("验证码格式错误：请输6位纯数字"); e.preventDefault(); return false; } } }); </script>为什么直接写onclick="alert()"不管用
常见错误是给提交按钮加onclick="alert(...); form.submit();"，这会绕过所有原生校验（包括required和pattern），因为form.submit()方法不触发验证流程。
-
form.submit()是静默提交，不检查validity状态 - 只有用户点击
type="submit"按钮或按Enter，才会触发校验+提交的完整链路 - 所以必须用
addEventListener("submit")，而不是onclick
iOS Safari 的 title 提示不可靠，JS 补充是刚需
iOS Safari 不支持 hover 显示title，且提交失败时提示常被忽略或延迟出现。哪怕你写了title="格式不对"，用户也可能根本看不到。
- 不能依赖
title作为唯一反馈渠道 - 建议同时用
input事件监听实时校验，并在输入框下方加<span class="error"></span>动态更新文字 - 若坚持用弹窗，
alert()在 iOS 上虽能弹出，但体验生硬；更推荐用dialog元素或轻量级 modal
真正容易被忽略的是：pattern校验只在提交瞬间生效，且无法区分“空值”和“非法值”——除非你显式用required或setCustomValidity()干预。别指望它自动帮你做业务级提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
