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. 身份证正则只做格式校验,业务严谨场景还需要后端进一步校验。
相关推荐
Funlang1 分钟前
给机器写的 JavaScript 造个笼子
开发语言·javascript·ecmascript
普通人65 分钟前
PHP文件读写完全指南
开发语言·php·1024程序员节
古茗前端团队16 分钟前
由 key 引发的思考
前端·javascript·react.js
kyriewen35 分钟前
我扫了 422 个仓库,近一半 CI 在裸装依赖
前端·javascript·程序员
坤坤子吖1 小时前
Linux网络编程:TCP服务器的多进程与多线程实现
linux·服务器·开发语言·网络·c++·笔记·学习
一晌小贪欢1 小时前
Python基础:第 09 篇 · while 循环:重复直到不满足
开发语言·c++·python·数据可视化·面向对象·python办公
xiaoye-duck2 小时前
《C++ 项目:手写大模型接入 SDK》LLMManager架构设计与实现
开发语言·网络·c++·语言模型
一条大祥脚2 小时前
CuTe 与 CuTe DSL:从 C++ 模板元编程到 Python DSL 的 GPU 编程演进
开发语言·c++·python·cutlass·cute·cute dsl
FRing033 小时前
vue2干货总结8(路由模块封装、router-link、声明式导航、路由重定向、编程式导航)
开发语言·前端·vue.js·vue2
旖旎夜光3 小时前
【C++ 基础入门】C++ 多态(上):虚函数、重写、override/final 与抽象类
开发语言·c++·笔记·学习