js中使用的正则表达式

摘要:日常开发中表单校验几乎离不开正则,本文整理开发高频用到的正则:手机号、身份证、邮箱、金额、账号密码、中文英文等,附带 JS 示例代码,直接复制即可使用。

前言

在前端做表单校验,正则表达式是最高效的手段。比如判断手机号格式、身份证、邮箱、金额、用户名密码、中文输入等场景。下面整理一套业务开发中经常复用的正则,每一条附带注释说明。

完整代码示例

复制代码
<script>
    let inputvalue = ''

    //1. 判断是否是正整数
    let reg1 = /^[1-9]*$/
    console.log(reg1.test(inputvalue))

    //2. 手机号码匹配 11位数字
    let reg2 = /^1[3-9]\d{9}$/
    console.log(reg2.test(inputvalue))

    //3. 身份证号匹配(18位)
    let reg3 = /^[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]$/
    console.log(reg3.test(inputvalue))

    //4. 邮箱匹配
    let reg4 = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
    console.log(reg4.test(inputvalue))

    //5. 金钱匹配(纯数字,保留两位小数)
    let reg5 = /^-?0|[1-9]\d*(\.\d{1,2})?$/
    console.log(reg5.test(inputvalue))

    //6. 匹配中文
    let reg6 = /^[\u4e00-\uufa5]+$/
    console.log(reg6.test(inputvalue))

    //7. 匹配英文
    let reg7 = /^[a-zA-Z]+$/
    console.log(reg7.test(inputvalue))

    //8. 匹配英文和数字
    let reg8 = /^[a-zA-Z0-9]+$/

    //9. 国内座机号码匹配
    let reg9 = /^0\d{2,3}-\d{7,8}$/

    //10. 用户账号匹配
    /*
     * 1.4‑16 位
     * 2.只能字母、数字、下划线
     * 3.不能以数字开头(必须字母开头)
     */
    const reg10 = /^[a-zA-Z][a-zA-Z0-9_]{3,15}$/
    console.log(reg10.test('admin 001'))
    console.log(reg10.test('001admin'))
    console.log(reg10.test('admin!'))

    //11.密码强度
    /*
     * 1.6‑20 位
     * 2.必须同时包含:字母 + 数字
     */
    const reg11 = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z0-9]{6,20}$/
    console.log(reg11.test('admin001'))
    console.log(reg11.test('001admin'))
    console.log(reg11.test('admin1111'))


    /**
     * 工具函数:提取字符串里面全部数字
     * @param str 原始字符串
     * @returns {*} 匹配到的数字数组
     */
    function getNum(str) {
        let reg = /\d+/g
        return str.match(reg)
    }
    console.log(getNum('订单号:ORD‑2026‑0727'))
    console.log(getNum('金额:599元'))


    /**
     * 判断是否是手机号
     * @param str 输入字符串
     */
    function isphone(str) {
        let reg_result = /^1[3-9]\d{9}$/.test(str)
        if (reg_result === true) {
            return console.log(`${str} 是手机号`)
        } else {
            return console.log(`${str} 不是手机号`)
        }
    }
    isphone('18888888888')
    isphone('12345678901')


    /**
     * 判断是否有效邮箱
     * @param str 输入字符串
     */
    function isemail(str) {
        let reg_result = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(str)
        if (reg_result === true) {
            return console.log(`${str} 是邮箱`)
        } else {
            return console.log(`${str} 不是邮箱`)
        }
    }
    isemail('12345678901@163.com')
    isemail('invalid‑email')


    /**
     * 从文本提取全部手机号
     * @param str 原始大段文本
     * @returns {*} 手机号数组
     */
    function gettPhone(str) {
        let reg = /1[3-9]\d{9}/g
        return console.log(str.match(reg))
    }
    gettPhone('手机号:18888888888,18888888894,18888888895')
    gettPhone('联系13800138001,备用13800138009')
</script>

核心 API 说明

  1. reg.test(str)

返回布尔值 true/false,检测字符串是否满足正则规则,表单校验最常用。

复制代码
let reg = /^1[3-9]\d{9}$/
let res = reg.test('13800138000')
console.log(res) // true
  1. str.match(reg)

将字符串中匹配到内容提取出来,返回数组,加修饰符g代表全局匹配。

复制代码
'abc123def456'.match(/\d+/g) // ["123","456"]

常用正则对照表

表格

校验场景 正则表达式
手机号 /^1[3-9]\d{9}$/
身份证 (18 位) `/^1-9\d{5}(18 19 (23\d))\d{2}((01-9) (10 11 12))((0-21-9) 10 20 30 31)\d{3}0-9Xx$/`
邮箱 /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
金额(最多两位小数) `/^-?0 1-9\d*(.\d{1,2})?$/`
纯中文 /^[\u4e00-\uufa5]+$/
账号(字母开头,4‑16 位,字母数字下划线) /^[a-zA-Z][a-zA-Z0-9_]{3,15}$/
密码(6‑20 位,字母 + 数字) /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z0-9]{6,20}$/

小坑提醒

  1. ^代表字符串开头,$代表字符串结尾,表单校验一定要带上,不然部分匹配会绕过校验。
  2. 全局匹配g修饰符,不要用在test(),会有状态残留问题,提取内容才用g
  3. 身份证正则只做格式校验,业务严谨场景还需要后端进一步校验。
相关推荐
szarron1 小时前
国产手持式频谱分析仪选型攻略:TFN RC系列 vs HTOOL SA8T频谱分析仪 专业参数对比(军工/路测/调试全覆盖)
开发语言·前端·状态模式
我是唐青枫1 小时前
C#.NET StructureMap 从依赖注入到项目实战
开发语言·c#·.net
Beyond_System|系统之外1 小时前
一个网页如何同时适配投影仪、1366×768 和 1920×1080?我重新理解了“自适应布局”
开发语言·css·html
开开心心就好1 小时前
免费桌签打印工具,支持批量导入名字
前端·javascript·人工智能·docker·jupyter·智能手机·语音识别
CappuccinoRose1 小时前
Web Components 基础
前端·javascript·交互·web component·shadow dom
Wang's Blog1 小时前
Java框架快速入门: Spring Security+OAuth2之定制登录页
java·开发语言·spring
imgsq1 小时前
MapLibre GL JS v6 正式发布:v5 之后八个月的第一个大版本(编译)
开发语言·javascript·ecmascript
统计学小王子1 小时前
数学建模国赛倒计时 2 天 ——《缺失值处理一(R语言)》
开发语言·数学建模·r语言
嘻哈baby2 小时前
大量消息在 MQ 里长时间积压,该如何解决?
开发语言