1、手机号码的校验

  1. const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
  2. const phoneStr1 = '18886233487'
  3. console.log(phoneReg.test(phoneStr1)) // true
  4. const phoneStr2 = '17283017203897'
  5. console.log(phoneReg.test(phoneStr2)) // false

2、身份证的校验

  1. const sfzReg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
  2. const sfzStr1 = '415106199801012130'
  3. console.log(sfzReg.test(sfzStr1)) // true
  4. const sfzStr2 = '718381298381212183'
  5. console.log(sfzReg.test(sfzStr2)) // false

3、邮箱的校验

  1. const emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
  2. const emailStrWY = '956666@163.com' // 163邮箱
  3. const emailStrQQ = '956666@qq.com' // qq邮箱
  4. console.log(emailReg.test(emailStrWY)) // true
  5. console.log(emailReg.test(emailStrQQ)) // true
  6. const noEmail = '72873213.com'
  7. console.log(emailReg.test(noEmail)) // false

4、URL的校验

  1. const urlReg = /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/
  2. const urlStr1 = 'https://haha.sunshine.com/xxx/xxx'
  3. console.log(urlReg.test(urlStr1)) // true
  4. const urlStr2 = 'sss://haha.sunshine.com/xxx/xxx'
  5. console.log(urlReg.test(urlStr2)) // false

5、IPv4的校验

  1. 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]?)$/
  2. const ipv4Str1 = '122.12.56.65'
  3. console.log(ipv4Reg.test(ipv4Str1)) // true
  4. const ipv4Str2 = '122.12.56.655'
  5. console.log(ipv4Reg.test(ipv4Str2)) // false

6、16进制颜色的校验

  1. const color16Reg = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
  2. const color16Str1 = '#fff'
  3. console.log(color16Reg.test(color16Str1)) // true
  4. const color16Str2 = '#1234567'
  5. console.log(color16Reg.test(color16Str2)) // false

7、日期 YYYY-MM-DD

  1. const dateReg = /^\d{4}(\-)\d{1,2}\1\d{1,2}$/
  2. const dateStr1 = '2021-10-10'
  3. console.log(dateReg.test(dateStr1)) // true
  4. const dateStr2 = '2021-01-01 1'
  5. console.log(dateReg.test(dateStr2)) // false

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

  1. const dateReg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/
  2. const dateStr1 = '2021-10-10 16:16:16'
  3. console.log(dateReg.test(dateStr1)) // true
  4. const dateStr2 = '2021-10-10 16:'
  5. console.log(dateReg.test(dateStr2)) // false

9、整数的校验

  1. const intReg = /^[-+]?\d*$/
  2. const intNum1 = 12345
  3. console.log(intReg.test(intNum1)) // true
  4. const intNum2 = 12345.1
  5. console.log(intReg.test(intNum2)) // false

10、小数的校验

  1. const floatReg = /^[-\+]?\d+(\.\d+)?$/
  2. const floatNum = 1234.5
  3. console.log(floatReg.test(floatNum)) // true

11、保留n位小数

  1. function checkFloat(n) {
  2. return new RegExp(`^([1-9]+[\d]*(.[0-9]{1,${n}})?)$`)
  3. }
  4. // 保留2位小数
  5. const floatReg = checkFloat(2)
  6. const floatNum1 = 1234.5
  7. console.log(floatReg.test(floatNum1)) // true
  8. const floatNum2 = 1234.55
  9. console.log(floatReg.test(floatNum2)) // true
  10. const floatNum3 = 1234.555
  11. console.log(floatReg.test(floatNum3)) // false

12、邮政编号的校验

  1. const postalNoReg = /^\d{6}$/
  2. const postalNoStr1 = '522000'
  3. console.log(postalNoReg.test(postalNoStr1)) // true
  4. const postalNoStr2 = '5220000'
  5. console.log(postalNoReg.test(postalNoStr2)) // false

13、QQ号的校验

说明:5-11位数字

  1. const qqReg = /^[1-9][0-9]{4,10}$/
  2. const qqStr1 = '1915801633'
  3. console.log(qqReg.test(qqStr1)) // true
  4. const qqStr2 = '191580163333'
  5. console.log(qqReg.test(qqStr2)) // false

14、微信号的校验

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

  1. const wxReg = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/
  2. const wxStr1 = 'linsanxin885577'
  3. console.log(wxReg.test(wxStr1)) // true
  4. const wxStr2 = '厉害了我的vx'
  5. console.log(wxReg.test(wxStr2)) // false

15、车牌号的校验

  1. const carNoReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/
  2. const carNoStr1 = '粤A12345'
  3. console.log(carNoReg.test(carNoStr1)) // true
  4. const carNoStr2 = '广东A12345'
  5. console.log(carNoReg.test(carNoStr2)) // false

16、只含字母的字符串

  1. const letterReg = /^[a-zA-Z]+$/
  2. const letterStr1 = 'sunshineLin'
  3. console.log(letterReg.test(letterStr1)) // true
  4. const letterStr2 = 'sunshine_Lin'
  5. console.log(letterReg.test(letterStr2)) // false

17、包含中文的字符串

  1. const cnReg = /[\u4E00-\u9FA5]/
  2. const cnStr1 = '我是sunshine_Lin,林三心'
  3. console.log(cnReg.test(cnStr1)) // true
  4. const cnStr2 = 'sunshine_Lin'
  5. console.log(cnReg.test(cnStr2)) // false

18、密码强度的校验

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

  1. const passwordReg = /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}/
  2. const password1 = 'sunshine_Lin12345..'
  3. console.log(passwordReg.test(password1)) // true
  4. const password2 = 'sunshineLin12345'
  5. console.log(passwordReg.test(password2)) // false

19、字符串长度n的校验

  1. function checkStrLength(n) {
  2. return new RegExp(`^.{${n}}$`)
  3. }
  4. // 校验长度为3的字符串
  5. const lengthReg = checkStrLength(3)
  6. const str1 = 'hhh'
  7. console.log(lengthReg.test(str1)) // true
  8. const str2 = 'hhhhh'
  9. console.log(lengthReg.test(str2)) // false

20、文件拓展名的校验

  1. function checkFileName (arr) {
  2. arr = arr.map(name => `.${name}`).join('|')
  3. return new RegExp(`(${arr})$`)
  4. }
  5. const filenameReg = checkFileName(['jpg', 'png', 'txt'])
  6. const filename1 = 'sunshine.jpg'
  7. console.log(filenameReg.test(filename1)) // true
  8. const filename2 = 'sunshine.png'
  9. console.log(filenameReg.test(filename2)) // true
  10. const filename3 = 'sunshine.txt'
  11. console.log(filenameReg.test(filename3)) // true
  12. const filename4 = 'sunshine.md'
  13. console.log(filenameReg.test(filename4)) // false

21、匹配img和src

  1. const imgReg = /<img.*?src=[\"|\']?(.*?)[\"|\']?\s.*?>/ig
  2. const htmlStr = '<div></div><img src="sunshine.png" /><img src="sunshine111.png" />'
  3. console.log(imgReg.exec(htmlStr))
  4. // [
  5. // '<img src="sunshine.png" />',
  6. // 'sunshine.png',
  7. // index: 11,
  8. // input: '<div></div><img src="sunshine.png" /><img src="sunshine111.png" />',
  9. // groups: undefined
  10. // ]
  11. console.log(imgReg.exec(htmlStr))
  12. // [
  13. // '<img src="sunshine111.png" />',
  14. // 'sunshine111.png',
  15. // index: 37,
  16. // input: '<div></div><img src="sunshine.png" /><img src="sunshine111.png" />',
  17. // groups: undefined
  18. // ]

22、匹配html中的注释

  1. const noteReg = /<!--(.*?)-->/g
  2. const htmlStr = '<!--一个div标签--> <div></div> <!--一个div标签--> <div></div>'
  3. console.log(noteReg.exec(htmlStr))
  4. // [
  5. // '<!--一个div标签-->',
  6. // '一个div标签',
  7. // index: 0,
  8. // input: '<!--一个div标签--> <div></div> <!--一个div标签--> <div></div>',
  9. // groups: undefined
  10. // ]
  11. console.log(noteReg.exec(htmlStr))
  12. // [
  13. // '<!--一个div标签-->',
  14. // '一个div标签',
  15. // index: 27,
  16. // input: '<!--一个div标签--> <div></div> <!--一个div标签--> <div></div>',
  17. // groups: undefined
  18. // ]

23、匹配html中的style

  1. const styleReg = /style="[^=>]*"([(\s+\w+=)|>])/g
  2. const htmlStr = '<div style="background:#000;"><span style="color:#fff"></span></div>'
  3. console.log(styleReg.exec(htmlStr))
  4. // [
  5. // 'style="background:#000;">',
  6. // '>',
  7. // index: 5,
  8. // input: '<div style="background:#000;"><span style="color:#fff"></span></div>',
  9. // groups: undefined
  10. // ]
  11. console.log(styleReg.exec(htmlStr))
  12. // [
  13. // 'style="color:#fff">',
  14. // '>',
  15. // index: 36,
  16. // input: '<div style="background:#000;"><span style="color:#fff"></span></div>',
  17. // groups: undefined
  18. // ]

24、匹配html中的颜色

  1. const colorReg = /#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/g
  2. const htmlStr = '<div style="background:#000;"><span style="color:#fff"></span></div>'
  3. console.log(colorReg.exec(htmlStr))
  4. // [
  5. // '#000',
  6. // '000',
  7. // index: 23,
  8. // input: '<div style="background:#000;"><span style="color:#fff"></span></div>',
  9. // groups: undefined
  10. // ]
  11. console.log(colorReg.exec(htmlStr))
  12. // [
  13. // '#fff',
  14. // 'fff',
  15. // index: 49,
  16. // input: '<div style="background:#000;"><span style="color:#fff"></span></div>',
  17. // groups: undefined
  18. // ]

25、匹配htmlTag(html标签)

  1. const endReg = /<("[^"]*"|'[^']*'|[^'">])*>/g
  2. const htmlStr = '<div style="background:#000;"><span style="color:#fff"></span></div><h1></h1>'
  3. console.log(endReg.exec(htmlStr))
  4. console.log(endReg.exec(htmlStr))
  5. console.log(endReg.exec(htmlStr))
  6. console.log(endReg.exec(htmlStr))
  7. console.log(endReg.exec(htmlStr))
  8. console.log(endReg.exec(htmlStr))