博客

前端常用正则表达式

  • Post author:
  • Post category:其他



一、占位符

占位符：占据一个位置，说明后期你要给我一个相应的值

1.  .点：代表一个任意的字符

let reg = /^.$/


2. \d:代表一个数字： 0-9

let reg = /^\d$/

let reg = /^\d$/

3. \D:代表一个非数字

let reg = /^\D$/

let reg = /^\D$/


4. \w:代表一个合法字符： 0-9  A-Z  a-z

let reg = /^\w$/

let reg = /^\w$/

5.\W:代表一个非法字符

let reg = /^\W$/

6.\s: 代表一个空字符：空格  制表位  换行

let reg = /^\s$/

7.\S: 代表一个非空字符

let reg = /^\S$/


8.[]:代表一个指定的范围中的某个字符，范围可以是具体的值范围，也可以是一个连续的范围


在描述连续范围的时候，-是一个连接符

[]里面的字符都当成普通字符来看待,相当于转义了

let reg = /^[12345]$/ //只能匹配一个

let reg = /^[1-5]$/

let reg = /^[0-9A-Za-z_]$/

let reg = /^[0.]$/

let reg = /^[^0]$/ //只能是0


二、修饰符

先占位，后修饰 从左到右写

1. *:修饰前面的字符出现任意次

let reg = /^\d*$/

2. ?:修饰前面的字符出现0次或1次   ***

02012345678 >> 020-12345678

let reg = /^\d?$/

let reg = /^\d?$/

3.+:修饰前面的字符出现1次或多次   *****

let reg = /^\d+$/

let reg = /^\d+$/

4.{n}:修饰前面的字符出现n次      *****

let reg = /^\d{11}$/

let reg = /^\d{5}$/

手机号： 第一位只能是1  第二位只能35789中的一个，剩余9位数字

let reg = /^1[35789]\d{9}$/

let reg = /^1[0-9]\d{9}$/

5.{n,m}:修饰前面的字符最少出现n次，最多出现m次   ****

02012345678 >> 020-12345678

let reg = /^0[1-9]\d{1,2}[-]?[1-9]\d{6,7}$/

6.{n,}:修饰前面的字符最少出现n次，最多没有限制   ***

let reg = /^\w{3,}$/


三、小案例


验证用户名、手机号、邮箱号等
 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      span {
        color: red;
      }
    </style>
  </head>
  <body>
    用户名：<input
      class="username"
      type="text"
      placeholder="请输入至少三位合法字符"
    />
    <span></span>
    <br />
    密码：
    <input class="password" type="text" placeholder="请输入3-16位密码" /> <br />
    手机号：
    <input class="phone" type="text" placeholder="请输入合法的手机号" /> <br />
    邮箱：
    <input class="email" type="text" placeholder="请输入一个合法的邮箱地址" />
    <br />
    <button>提交</button>

    <script>
      let btn = document.querySelector('button')
      let username = document.querySelector('.username')
      let password = document.querySelector('.password')
      let phone = document.querySelector('.phone')
      let email = document.querySelector('.email')
      btn.addEventListener('click', function() {
        let regname = /^\w{3,}$/
        if (!regname.test(username.value)) {
          // alert('用户名输入不合法')
          let span = username.nextElementSibling
          span.innerHTML = '用户名输入不合法'
          username.focus()
          return
        } else {
          let span = username.nextElementSibling
          span.innerHTML = ''
        }
        let regpass = /^.{3,16}$/
        if (!regpass.test(password.value)) {
          alert('请输入3-16位密码')
          password.focus()
          return
        }
        let regphone = /^1[35789]\d{9}$/
        if (!regphone.test(phone.value)) {
          alert('手机号输入不合法')
          phone.focus()
          return
        }
        // wuhu0723@126.com
        let regemail = /^\w+[@]\w{2,}[.]\w{2,4}$/
        if (!regemail.test(email.value)) {
          alert('邮箱输入不合法')
          email.focus()
          return
        }

        console.log('提交成功')
      })
    </script>
  </body>
</html>


验证身份证号
 

<script>
      // 身份证号： 一共18位
      // 18纯数字
      // 17数字 + x|X
      let id = prompt('请输入身份证号')
      // |： 多种情况满足其中一个
      let reg = /^(1[34])|(2[56])$/
      let result = reg.test(id)
      console.log(result)
    </script>

以下内容转载自：


海涛czwx


1.数字相关的正则表达式

数字：^[0-9]*$

n位定长的数字：^\d{n}$

m-n位之间的数字：^\d{m,n}$

零和非零开头的数字：^(0|[1-9][0-9]*)$

非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$

带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$

正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$

有两位小数的正实数：^[0-9]+(.[0-9]{2})?$

有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$

正整数：^\d+$ 或 ^[1-9]\d*|0$

负整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$

正浮点数：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$

负浮点数：^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$

浮点数：^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$



2.字符相关的正则表达式

汉字：^[\u4e00-\u9fa5]{0,}$

长度为3-20的所有字符：^.{3,20}$

由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$

由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$

中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$

中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$

帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$

密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$

强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$



3.固定格式约定俗成的正则表达式

Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

网站域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?

URL网址：^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$

手机号码：^(13[0-9]|17[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$

电话号码(“XXX-XXXXXXX”、”XXXX-XXXXXXXX”、”XXX-XXXXXXX”、”XXX-XXXXXXXX”、”XXXXXXX”和”XXXXXXXX)：^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$

国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}

身份证号(15位、18位数字)：^\d{15}|\d{18}$

日期格式：^\d{4}-\d{1,2}-\d{1,2}

一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$

一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$

腾讯QQ号：[1-9][0-9]{4,8} (腾讯QQ号从10000开始，目前最长为10位)

中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)

IP地址：\d+\.\d+\.\d+\.\d+ (提取IP地址时有用)

IP地址：((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))

————————————————

版权声明：本文为CSDN博主「海涛czwx」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/BrianWey/article/details/82716186


版权声明：本文为m0_66333916原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。