vue表单校验手机号用/^1[3-9]d{9}$/、邮箱用/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,})+$/，优先pattern轻量校验，复杂逻辑用validator函数统一处理空值和清洗。
Vue 表单校验中处理手机号和邮箱的正则校验，核心是用 pattern 或 validator 两种方式配合 rules 配置，既要保证基础格式合理，又要兼顾真实可用性，避免过度严格或形同虚设。
手机号校验：用 /^1[3-9]d{9}$/ 而非 /^d{11}$/
很多项目一开始写成 /^d{11}$/，看似简洁，实则问题明显：它允许 00000000000、12345678901 这类无效号码通过，等提交后端才报错，用户体验差。
- 推荐正则：
/^1[3-9]d{9}$/—— 匹配以 1 开头、第二位是 3–9、共 11 位数字的结构，覆盖当前主流号段（含携号转网后仍有效的号码） - 注意兼容粘贴场景：用户可能从通讯录粘贴带空格、横线或 +86 前缀的号码。建议在触发校验前先做简单清洗，比如
.replace(/[s+-()]/g, '') - 若需支持国际号码（如 +86 138…），可改用更宽松的预处理 + 校验组合，但国内表单通常不强制要求
邮箱校验：别依赖 type="email"，用更稳妥的 pattern
Vue 的 type: 'email' 内置校验虽方便，但标准宽松（如 a@b 也能过），且浏览器实现不一致；生产环境建议用自定义正则。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章