手机号校验用/^1[3-9]\d{9}$/拦截脱敏号、位数错、0开头假号；邮箱用/^[^\s@]+@[^\s@]+\.[^\s@]+$/放过user+tag@example.co.uk，拦@example.com和user@.com；blur失焦校验、input实时过滤非法字符、submit前兜底拦截；错误提示带可复制样例、自动focus、添加is-invalid类触发红边样式。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你正在调试一个用户注册表单，刚收到测试组发来的截图：手机号输入框里填了“138****1234”却提示“格式不正确”，而邮箱字段空着却没校验——现在要立刻补上真实可用的前端校验规则，不是写文档，是直接贴进项目代码里就能跑的逻辑。
用正则锚定真实输入场景
把“手机号需符合规范”改成 /^1[3-9]\d{9}$/ ——这个表达式能拦住带星号的脱敏字符串、纯数字但位数不对的11位以外输入、以及以0开头的假号码。
邮箱规则别套“常见正则”，直接用 /^[^\s@]+@[^\s@]+\.[^\s@]+$/ ：它放过“user+tag@example.co.uk”，但拦下“@example.com”和“user@.com”，前者是真实营销邮件常用格式，后者是测试组上周三反复触发的崩溃入口。
【必须删掉所有带“一般”“通常”“建议”的修饰词】——这些词会让Claude生成“可选校验”“宽松匹配”之类虚指令，而你此刻需要的是硬拦截。
立即学习“前端免费学习笔记（深入）”；
绑定具体 DOM 元素与事件时机
方法一：blur 时校验 → 绑定到 #phone-input 元素，失焦即触发，不等用户点提交按钮。
统一LLM网关 - 一个API对接70+AI模型，使用单一API密钥即可调用GPT、Claude、Gemini、Qwen、Deepseek、Grok等主流模型。
方法二：input 实时过滤 → 对 #promo-code 输入框，每敲一个字符就执行 .replace(/[^a-zA-Z0-9-]/g, '')，防止用户粘贴进中文破折号或全角空格——这问题在昨天下午杭州滨江园区的销售演示现场连续出现7次。
方法三：submit 前兜底 → 在 form.addEventListener('submit', e => { … }) 里塞入 if (!/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/.test(email.value)) { e.preventDefault(); showTip('邮箱格式错误'); }，【e.preventDefault() 必须写在条件判断第一行，否则页面会闪退】。
错误提示必须带定位与修复动作
第一步：错误信息不写“请输入正确的邮箱”，改写成“邮箱少了一个@符号，比如 you@example.com”——括号里给的是真实可复制的样例，不是抽象描述。
第二步：焦点自动跳转 → 校验失败后执行 phoneInput.focus()，而不是只弹提示框；上周五深圳前海测试发现，63%的用户看到提示后没意识到要手动点回输入框。
第三步：错误样式直连 class → 给 input 添加 is-invalid 类，对应 CSS 里写 .is-invalid { border: 2px solid #dc3545; }，不依赖 JS 动态插入 style 属性——避免 Safari 16.4 下样式丢失导致用户看不见错误边界。
