JS正则表达式实战_表单验证技巧合集

箱验证使用基础正则 /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/ 覆盖常见格式;2. 手机号用 /^1[3-9]d{9}$/ 匹配大陆主流号段;3. 密码需至少8位并包含大小写、数字、特殊字符中三项,通过分步正则检测;4. 身份证采用简化正则 /^[1-9]d{5}[1-9]d{3}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{3}(d|X)$/ 校验18位结构;5. 中文姓名用 /^[u4e00-u9fa5]{2,4}$/ 限制2-4个汉字;6. URL 用 /^https?://(?:[-w.]|(?:%[da-fA-F]{2}))+/ 验证http/https开头。结合HTML5表单属性与JS正则可提升校验可靠性。

js正则表达式实战_表单验证技巧合集

表单验证是前端开发中不可或缺的一环,JavaScript 正则表达式(RegExp)在其中扮演着关键角色。通过合理使用正则,可以高效校验用户输入的格式是否合规。下面整理几种常见场景下的正则验证技巧,帮助你在实际项目中快速上手。

1. 邮箱格式验证

邮箱是表单中最常见的字段之一,其格式有一定规范:由字母、数字、点、下划线和连字符组成,中间有一个 @ 符号,后跟域名。

// 基础但实用的邮箱正则

const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/;

使用方式:

if (emailRegex.test(“user@example.com”)) {
  console.log(“邮箱格式正确”);
}

// 注意:此正则覆盖大多数常见情况,极端合法邮箱可能不匹配,但对一般业务足够

2. 手机号码验证(中国大陆)

中国大陆手机号通常为 11 位,以 1 开头,第二位通常是 3-9。

// 匹配主流运营商号码段

const phoneRegex = /^1[3-9]d{9}$/;

示例:

if (phoneRegex.test(“13812345678”)) {
  console.log(“手机号有效”);
}

// 可根据需要扩展虚拟运营商号段(如 170、171 等)

3. 密码强度校验

安全密码通常要求包含大小写字母、数字、特殊字符中的至少三项,且长度不少于8位。

// 分步检查更清晰

function validatePassword(pwd) {
  let count = 0;
  if (/(?=.*[a-z])/.test(pwd)) count++;
  if (/(?=.*[A-Z])/.test(pwd)) count++;
  if (/(?=.*d)/.test(pwd)) count++;
  if (/(?=.*[@$!%*?&])/.test(pwd)) count++;
  return pwd.length >= 8 && count >= 3;
}

调用:
validatePassword(“MyPass123!”) → true

4. 身份证号码校验(18位)

中国大陆身份证为18位,前17位为数字,最后一位可能是数字或X。

Vizard Vizard

AI驱动的视频编辑器

Vizard 101 查看详情 Vizard // 简化版正则,适用于基本格式校验

const idCardRegex = /^[1-9]d{5}[1-9]d{3}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{3}(d|X)$/;

说明:
– 前6位:地区编码
– 中间8位:出生年月日
– 后4位:顺序码与校验码

// 如需严格校验,建议结合算法验证出生日期和校验位

5. 中文姓名验证

中文姓名通常由2-4个汉字组成,允许复姓或双名。

const nameRegex = /^[u4e00-u9fa5]{2,4}$/;

使用:

nameRegex.test(“张三”) → true
nameRegex.test(“欧阳小明”) → true
nameRegex.test(“Li”) → false

6. URL 地址校验

验证用户输入的是否为合法网址,支持 http/https。

const urlRegex = /^https?://(?:[-w.]|(?:%[da-fA-F]{2}))+/;

注意点:
– 必须以 http:// 或 https:// 开头
– 不强制完整域名结构,避免过于复杂

进阶可使用更完整的正则或浏览器内置 URL 构造函数辅助判断。

基本上就这些。正则表达式虽强大,但也别过度依赖复杂模式。结合语义判断和用户体验,分步校验往往更可靠。实际开发中,建议配合 HTML5 的 input 类型(如 type=”email”)和 required 属性,再用 JS 正则做深度控制,效果更佳。

以上就是JS正则表达式实战_表单验证技巧合集的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/870842.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
它延期我改期!Devolver Digital坚持”伏击”《GTA6》
上一篇 2025年11月28日 05:04:21
稻壳阅读器最新官网访问链接 稻壳阅读器阅读器平台主页官方入口地址
下一篇 2025年11月28日 05:04:21

相关推荐

  • 豆包和deepseek的差距

    豆包和 DeepSee 的主要差距在于用途、规模和复杂性。用途方面,豆包用于数据传输,DeepSee 用于大数据分析。规模方面,豆包处理少量数据,DeepSee 处理海量数据集。复杂性方面,豆包易于使用,DeepSee 需要高级技术技能。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无…

    2026年8月31日
    000
  • MySQL事务锁机制对性能影响_MySQL死锁预防和处理技巧

    MySQL事务锁机制对性能影响_MySQL死锁预防和处理技巧MySQL事务锁机制对性能影响_MySQL死锁预防和处理技巧MySQL事务锁机制对性能影响_MySQL死锁预防和处理技巧MySQL事务锁机制对性能影响_MySQL死锁预防和处理技巧

    mysql的事务锁机制是为保证数据一致性与完整性,通过锁定资源避免并发冲突。其对性能的影响主要体现在阻塞、死锁及锁开销。解决死锁的核心策略包括:1.缩短事务生命周期,减少锁持有时间;2.统一资源访问顺序,打破循环依赖;3.优化sql与索引,缩小锁范围;4.分批次处理大数据操作;5.谨慎调整事务隔离级…

    2026年8月31日 用户投稿
    000
  • 百度搜索 10 年来最大改版,首次支持超千字文本输入

    7 月 2 日消息,在今天的百度 ai day 活动中,百度搜索宣布了近十年来最大规模的界面改版。 百度搜索框现已升级为“智能输入框”,可支持超过千字的文本输入,并在拍照、语音、视频等功能上进行了全面增强,同时还能直接调用 AI 写作、AI 绘图等工具。 据百度方面介绍,搜索框的这一变化背后,是百度…

    2026年8月31日
    500
  • ​​电脑风扇噪音大怎么办?降噪解决方法​​

    电脑风扇噪音大通常由灰尘堆积、风扇老化或负载过高引起,解决方法包括:1. 清洁灰尘,使用压缩空气和软刷清理散热片与风扇,注意固定叶片防止空转损坏;2. 更换老化风扇,尤其是轴承磨损后需更换cpu、显卡或机箱风扇,笔记本建议专业人士操作;3. 重新涂抹导热硅脂,清除旧硅脂并均匀涂抹新硅脂以提升散热效率…

    2026年8月31日
    100
  • 夸克的神秘电影入口 夸克浏览器进入私人影院入口

    夸克浏览器作为一款以极简设计和智能搜索为核心的次世代工具,早已超越了传统浏览器的范畴。它不仅仅是信息获取的窗口,更凭借其强大的内核与集成的多功能模块,为用户悄然构建了一个专属的私人影院。在这个空间里,用户可以摆脱繁杂广告的干扰,通过其独特的智能检索技术,高效触达全网海量的影视资源,享受沉浸式、纯净且…

    2026年8月31日
    000
  • 荣耀 MWC 2024 展区体验:开启 AI 终端时代

    在今年的mwc上,荣耀设立了专门的展区,主题主要聚焦在ai终端。利用magicos 8.0,荣耀成功实现了跨设备的协同办公,并在其硬件产品中加入了多项ai相关功能。 在荣耀展区,他们精心邀请了一位芭蕾舞者,她翩翩起舞的同时,荣耀 Magic 6 Pro手机也在一旁展示其强大的抓拍能力。通过AI算法的…

    2026年8月31日
    000
  • 如何优雅的使用和理解线程池

    如何优雅的使用和理解线程池如何优雅的使用和理解线程池如何优雅的使用和理解线程池如何优雅的使用和理解线程池

    前言 平时接触过多线程开发的童鞋应该都或多或少了解过线程池,之前发布的《阿里巴巴 java 手册》里也有一条: 可见线程池的重要性。 简单来说使用线程池有以下几个目的: 线程是稀缺资源,不能频繁的创建。解耦作用;线程的创建于执行完全分开,方便维护。应当将其放入一个池子中,可以给其他任务进行复用。线程…

    2026年8月31日 用户投稿
    000
  • 怎样实现一个基于 JavaScript 的简单搜索引擎?

    答案是基于JavaScript实现轻量级搜索引擎,通过预加载JSON数据、使用filter进行文本匹配,并支持多关键词与权重排序,结合输入事件实时展示结果。 实现一个基于 JavaScript 的简单搜索引擎,核心是文本匹配和快速检索。不需要复杂的后端或数据库,适合静态网站或小型应用。关键思路是:预…

    2026年8月31日
    000
  • JavaScript forEach异步操作如何同步化?

    JavaScript forEach 异步操作的同步化处理详解 forEach 方法用于遍历 JavaScript 数组,其默认行为是同步执行。然而,当 forEach 循环体内部包含异步操作(例如 Promise)时,其执行顺序便不再同步。 文章中提到的代码片段试图通过 async/await 来…

    2026年8月31日
    000
  • Android开发中,responseData.data数组返回null值,如何正确解析嵌套JSON数据?

    Android开发:解析嵌套JSON数据及responseData.data数组返回null的解决方法 Android应用开发中,服务器返回的JSON数据常常包含复杂的嵌套结构。例如,responseData包含一个data字段,而data字段的值是一个JSON对象数组。本文探讨一个常见问题:res…

    2026年8月31日
    000
  • 台湾AI伺服器厂商赴美生产,鸿海、广达等布局德州

    ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ 受美国关税政策影响,台湾多家AI服务器厂商正加速在美国建厂,其中德州成为首选之地。鸿海、广达、维创、英业达和仁宝等企业均已将德州列为优先投资地点。据悉,电电公会近期已带领七家AI服务器厂商赴美考…

    2026年8月31日
    500
  • Java Optional.filter方法使用技巧

    Optional.filter用于条件筛选,值存在且满足条件时返回原值封装,否则返回空;可与map等链式调用,实现安全简洁的嵌套数据提取与校验。 Java 中的 Optional.filter 方法是一个非常实用的工具,用于在不破坏 Optional 封装的前提下,对内部值进行条件判断。如果值存在且…

    2026年8月31日
    000
  • PDF转Word怎么保留原格式_PDF转Word保留原格式的转换技巧

    PDF转Word怎么保留原格式_PDF转Word保留原格式的转换技巧PDF转Word怎么保留原格式_PDF转Word保留原格式的转换技巧PDF转Word怎么保留原格式_PDF转Word保留原格式的转换技巧PDF转Word怎么保留原格式_PDF转Word保留原格式的转换技巧

    使用专业工具、在线平台、Word直接打开或OCR技术可有效将PDF转为Word并保留原格式。首先选择可靠软件如Adobe Acrobat或WPS,启用保留格式选项进行转换;其次可通过Smallpdf等在线平台云端处理,确保预览无误后导出.docx文件;也可用Microsoft Word直接打开PDF…

    2026年8月31日 用户投稿
    500
  • 悟空搜索如何进行高级搜索_悟空搜索高级搜索功能详解

    通过掌握悟空搜索的高级功能可提升查询精准度:一、使用双引号实现完全匹配,减号排除干扰词,site:限定网站范围;二、利用时间与类型筛选器优化结果排序,结合语法如filetype:提高效率;三、在AI对话模式用自然语言提问,获取综合答案并连续追问深化检索。 如果您在使用悟空搜索时发现常规搜索结果不够精…

    2026年8月31日
    000
  • MySQL百万级数据日期查询慢?如何优化日期查询效率?

    MySQL百万级数据日期查询效率提升策略 在处理包含百万级数据的MySQL数据库时,日期查询的性能优化至关重要。本文将通过一个实际案例分析,深入探讨如何提升日期查询效率。 案例分析: 用户使用名为bns_pm_scanhistory_month的表(约100万条数据),其中scantime字段为da…

    2026年8月31日
    100
  • uc浏览器怎么更换主题 uc浏览器更换主题教程

    uc浏览器怎么更换主题 uc浏览器更换主题教程uc浏览器怎么更换主题 uc浏览器更换主题教程uc浏览器怎么更换主题 uc浏览器更换主题教程uc浏览器怎么更换主题 uc浏览器更换主题教程

    手机uc浏览器是一款非常实用的搜索浏览工具,用户可以通过它查找各类资讯。不过,有些用户觉得默认的浏览器主题不够美观,想要更换主题风格,却不知道该如何操作。下面为大家详细介绍手机uc浏览器更换主题的具体步骤,有需要的朋友千万别错过! 手机uc浏览器更换主题教程: 首先,在手机上打开已经安装好的UC浏览…

    2026年8月31日 用户投稿
    000
  • google浏览器怎么卸载干净_google浏览器彻底卸载方法

    通过系统设置卸载Chrome;2. 使用控制面板卸载并删除浏览数据;3. 手动删除AppData和ProgramData中的残留文件;4. 清理注册表中Google相关项;5. 删除Google更新任务并禁用更新服务,确保彻底移除。 如果您发现Google Chrome浏览器占用系统资源或与其他应用…

    2026年8月31日
    200
  • Vuex缓存更新:定时器方案可靠吗?

    高效维护Vuex缓存:避免定时器陷阱 面试中常常会遇到关于vuex缓存数据更新的问题。一种常见的方案是使用javascript定时器,在vuex的actions中定期调用接口更新缓存。然而,这种方法存在明显的缺陷。本文将深入探讨这种方法的不足,并提出更可靠的解决方案。 面试者提出的方案,即利用Jav…

    用户投稿 2026年8月31日
    000
  • 如何使用Composer解决数据填充问题?league/factory-muffin-faker助你高效生成测试数据

    可以通过一下地址学习composer:学习地址 在开发过程中,测试数据的生成是一个不可避免的环节。然而,当面对复杂的数据模型时,手动创建测试数据不仅耗时,还容易出错。我曾在项目中遇到过这样的问题:需要为一个包含多种关联关系的模型生成大量测试数据。尝试了多种方法后,我发现使用 composer 安装的…

    用户投稿 2026年8月31日
    200
  • 如何使用Overblog/GraphQLBundle解决Symfony项目中的API设计问题?Composer可以帮你实现!

    可以通过一下地址学习composer:学习地址 在现代 web 开发中,api 的设计和实现是一个关键环节。特别是当我们需要为前端提供一个灵活、强大的数据查询接口时,graphql 成为了一个热门的选择。然而,如何在 symfony 项目中高效地实现一个 graphql 服务器,却是一个让我头疼的问…

    用户投稿 2026年8月31日
    100

发表回复

登录后才能评论
关注微信