最全的正则验证，

const emailReg = /^([A-Za-z0-9_-.])+@([A-Za-z0-9_-.])+.([A-Za-z]{2,4})$/

​

const emailStrWY = ‘956666@163.com’ // 163邮箱

const emailStrQQ = ‘956666@qq.com’ // qq邮箱

console.log(emailReg.test(emailStrWY)) // true

console.log(emailReg.test(emailStrQQ)) // true

​

const noEmail = ‘72873213.com’

console.log(emailReg.test(noEmail)) // false

4、URL的校验

---

const urlReg = /^((https?|ftp|file)😕/)?([\da-z.-]+).([a-z.]{2,6})([/\w .-])/?$/

​

const urlStr1 = ‘https://haha.sunshine.com/xxx/xxx’

console.log(urlReg.test(urlStr1)) // true

​

const urlStr2 = ‘sss://haha.sunshine.com/xxx/xxx’

console.log(urlReg.test(urlStr2)) // false

5、IPv4的校验

---

const ipv4Reg = /^(?😦?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/

​

const ipv4Str1 = ‘122.12.56.65’

console.log(ipv4Reg.test(ipv4Str1)) // true

​

const ipv4Str2 = ‘122.12.56.655’

console.log(ipv4Reg.test(ipv4Str2)) // false

6、16进制颜色的校验

---

const color16Reg = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/

​

const color16Str1 = ‘#fff’

console.log(color16Reg.test(color16Str1)) // true

​

const color16Str2 = ‘#1234567’

console.log(color16Reg.test(color16Str2)) // false

7、日期 YYYY-MM-DD

---

const dateReg = /^\d{4}(-)\d{1,2}\1\d{1,2}$/

​

const dateStr1 = ‘2021-10-10’

console.log(dateReg.test(dateStr1)) // true

​

const dateStr2 = ‘2021-01-01 1’

console.log(dateReg.test(dateStr2)) // false

8、日期 YYYY-MM-DD hh:mm:ss

---

const dateReg = /^(\d{1,4})(-|/)(\d{1,2})\2(\d{1,2}) (\d{1,2})😦\d{1,2})😦\d{1,2})$/

​

const dateStr1 = ‘2021-10-10 16:16:16’

console.log(dateReg.test(dateStr1)) // true

​

const dateStr2 = ‘2021-10-10 16:’

console.log(dateReg.test(dateStr2)) // false

9、整数的校验

---

const intReg = /¹?\d*$/

​

const intNum1 = 12345

console.log(intReg.test(intNum1)) // true

​

const intNum2 = 12345.1

console.log(intReg.test(intNum2)) // false

10、小数的校验

---

const floatReg = /²?\d+(.\d+)?$/

​

const floatNum = 1234.5

console.log(floatReg.test(floatNum)) // true

11、保留n位小数

---

function checkFloat(n) {

return new RegExp(^([1-9]+[\d]*(.[0-9]{1,${n}})?)$)

}

// 保留2位小数

const floatReg = checkFloat(2)

​

const floatNum1 = 1234.5

console.log(floatReg.test(floatNum1)) // true

​

const floatNum2 = 1234.55

console.log(floatReg.test(floatNum2)) // true

​

const floatNum3 = 1234.555

console.log(floatReg.test(floatNum3)) // false

12、邮政编号的校验

---

const postalNoReg = /^\d{6}$/

​

const postalNoStr1 = ‘522000’

console.log(postalNoReg.test(postalNoStr1)) // true

​

const postalNoStr2 = ‘5220000’

console.log(postalNoReg.test(postalNoStr2)) // false

13、QQ号的校验

---

说明：5-11位数字

const qqReg = /³[0-9]{4,10}$/

​

const qqStr1 = ‘1915801633’

console.log(qqReg.test(qqStr1)) // true

​

const qqStr2 = ‘191580163333’

console.log(qqReg.test(qqStr2)) // false

14、微信号的校验

---

说明：6至20位，以字母开头，字母，数字，减号，下划线

const wxReg = /⁴([-_a-zA-Z0-9]{5,19})+$/

​

const wxStr1 = ‘linsanxin885577’

console.log(wxReg.test(wxStr1)) // true

​

const wxStr2 = ‘厉害了我的vx’

console.log(wxReg.test(wxStr2)) // false

15、车牌号的校验

---

const carNoReg = /⁵{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/

​

const carNoStr1 = ‘粤A12345’

console.log(carNoReg.test(carNoStr1)) // true

​

const carNoStr2 = ‘广东A12345’

console.log(carNoReg.test(carNoStr2)) // false

16、只含字母的字符串

---

const letterReg = /⁶+$/

​

const letterStr1 = ‘sunshineLin’

console.log(letterReg.test(letterStr1)) // true

​

const letterStr2 = ‘sunshine_Lin’

console.log(letterReg.test(letterStr2)) // false

17、包含中文的字符串

---

const cnReg = /[\u4E00-\u9FA5]/

​

const cnStr1 = ‘我是sunshine_Lin，林三心’

console.log(cnReg.test(cnStr1)) // true

​

const cnStr2 = ‘sunshine_Lin’

console.log(cnReg.test(cnStr2)) // false

18、密码强度的校验

---

说明：密码中必须包含字母、数字、特称字符，至少8个字符，最多30个字符

const passwordReg = /(?=.[0-9])(?=.[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}/

​

const password1 = ‘sunshine_Lin12345…’

console.log(passwordReg.test(password1)) // true

​

const password2 = ‘sunshineLin12345’

console.log(passwordReg.test(password2)) // false

19、字符串长度n的校验

---

function checkStrLength(n) {

return new RegExp(^.{${n}}$)

}

​

// 校验长度为3的字符串

const lengthReg = checkStrLength(3)

​

const str1 = ‘hhh’

console.log(lengthReg.test(str1)) // true

​

const str2 = ‘hhhhh’

console.log(lengthReg.test(str2)) // false

20、文件拓展名的校验

---

function checkFileName (arr) {

arr = arr.map(name => .${name}).join(‘|’)

return new RegExp((${arr})$)

}

​

const filenameReg = checkFileName([‘jpg’, ‘png’, ‘txt’])

​

const filename1 = ‘sunshine.jpg’

console.log(filenameReg.test(filename1)) // true

const filename2 = ‘sunshine.png’

console.log(filenameReg.test(filename2)) // true

const filename3 = ‘sunshine.txt’

console.log(filenameReg.test(filename3)) // true

const filename4 = ‘sunshine.md’

console.log(filenameReg.test(filename4)) // false

21、匹配img和src

---

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

后记

---

总结一下这三次面试下来我的经验是：

1. 一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！

2. 代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！

3. 尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！

4. 多刷面经！

我把所有遇到的面试题都做了一个整理，并且阅读了很多大牛的博客之后写了解析，免费分享给大家，算是一个感恩回馈吧，有需要的朋友【点击我】获取。祝大家早日拿到自己心怡的工作！

篇幅有限，仅展示部分内容

硬背，要理解原理，否则面试官一深入就会露馅！

2. 代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！

3. 尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！

4. 多刷面经！

我把所有遇到的面试题都做了一个整理，并且阅读了很多大牛的博客之后写了解析，免费分享给大家，算是一个感恩回馈吧，有需要的朋友【点击我】获取。祝大家早日拿到自己心怡的工作！

篇幅有限，仅展示部分内容

---

1. -+ ↩︎

2. -+ ↩︎

3. 1-9 ↩︎

4. a-zA-Z ↩︎

5. 京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z ↩︎

6. a-zA-Z ↩︎