html运行复制


你是不是经常遇到这种情况？用户填写的手机号少了一位数字，邮箱地址忘记打@符号，提交表单后才发现数据有问题。今天咱们就来解决这个让新手抓狂的难题——怎么用JS正则表达式快速验证手机号和邮箱格式？

（对了，新手想快速涨粉的话，这种基础但实用的技术必须得掌握啊！）

---

**先搞清楚正则表达式是啥玩意儿**
简单来说，正则就是给电脑看的"文字模具"。比如要判断手机号是不是11位数字，咱们就做个数字模具。当用户输入的内容能严丝合缝放进这个模具，才算合格。

**手机号验证怎么搞？**
三大运营商的号段天天变，但核心规则不变：
- 必须11位纯数字
- 第1位肯定是1
- 第2位得是3/4/5/7/8/9这些开头

来看个实战代码：
```javascript
const checkPhone = (num) => {
  return /^1[345789]\d{9}$/.test(num)
}
// 测试下
console.log(checkPhone('13812345678')) // true
console.log(checkPhone('1281234567'))  // false 第二位不对

??邮箱验证更复杂？??
其实抓住三个关键点就行：

1. @符号前允许字母数字和点号
2. @后面要有域名
3. 最后是2-6位的域名后缀

看这段代码就明白了：

javascript复制
const checkEmail = (str) => {
  return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str)
}
// 举个栗子
console.log(checkEmail('user.name@example.com')) // true
console.log(checkEmail('user@.com'))            // false

??常见翻车现场处理方案??
问：用户死活输不对怎么办？
答：在输入框旁边加个动态提示呗！

javascript复制
document.getElementById('phone').addEventListener('input', function() {
  const tip = document.getElementById('phoneTip')
  tip.textContent = checkPhone(this.value) ? '√ 格式正确' : '? 请输入11位手机号'
})

问：特殊号段怎么处理？
比如199号段是新出的，咱们把正则改成：

javascript复制
/^1[345789]\d{9}$|^199\d{8}$/

??对比表格看差异??

??小编最后叨叨两句??
刚入门的兄弟千万别被正则的斜杠符号吓到，其实就像搭乐高积木。建议大家先抄现成的正则模板，用熟了再自己改。遇到验证不灵的时候，推荐去regex101.com这个网站测试，比反复改代码快多了。记住，能把用户输错的情况提前拦截住，你的表单就成功了一半！

undefined