0

0

JavaScript中如何实现表单验证_正则表达式应用

夜晨

夜晨

发布时间:2025-12-05 20:23:02

|

381人浏览过

|

来源于php中文网

原创

javascript表单验证以正则表达式为核心,涵盖邮箱、手机号、密码、身份证等高频场景;需在submit事件中集中校验并阻止默认提交,结合前端提示与后端二次校验。

javascript中如何实现表单验证_正则表达式应用

JavaScript中实现表单验证,正则表达式是核心工具之一——它能精准匹配输入格式,比如手机号、邮箱、密码强度等,比单纯检查长度或非空更可靠。

常用正则表达式写法(直接可用)

以下是一些高频场景的正则模式,可直接复制到验证逻辑中:

  • 邮箱/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/(支持常见域名,排除连续点或开头/结尾符号)
  • 手机号(中国大陆)/^1[3-9]\d{9}$/(匹配13–19开头的11位数字)
  • 密码(6–16位,含字母和数字)/(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,16}/(使用正向先行断言确保两者都存在)
  • 身份证号(18位,含X校验)/^\d{17}[\dXx]$/(基础格式校验,如需严格校验需配合算法)

表单提交时触发验证

不要依赖单纯的onblur或oninput做最终判断,应在表单submit事件中集中校验,防止绕过:

Asp.net企业项目资料管理系统
Asp.net企业项目资料管理系统

1 系统使用三层构架2 数据库访问使用sqlHelper3 编辑器使用FreeTextBox4 布局采用Div+Css5 正则表达式实现数据验证6 动态构建sql查询语句

下载
  • event.preventDefault()阻止默认提交
  • 对每个必填字段调用regex.test(input.value),返回false就标红并提示
  • 所有验证通过才允许form.submit()或发起Ajax请求

提升体验的小技巧

正则验证不是“一锤定音”,要兼顾用户感受:

立即学习Java免费学习笔记(深入)”;

  • 输入过程中用input事件做轻量提示(如邮箱@符号出现后显示“格式可能正确”)
  • 错误提示紧邻对应输入框,避免只弹alert打断操作流
  • 对中文全角字符、前后空格提前用.trim().replace(/[\uFF01-\uFF5E]/g, c => String.fromCharCode(c.charCodeAt(0) - 65248))处理

基本上就这些。正则写对是关键,但别忘了结合语义化HTML(如type="email"required)和后端二次校验——前端验证只是第一道防线,不是保险箱。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

166

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

170

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

124

2023.11.15

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

257

2024.09.24

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

530

2023.06.20

正则表达式不包含
正则表达式不包含

正则表达式,又称规则表达式,,是一种文本模式,包括普通字符和特殊字符,是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串,通常被用来检索、替换那些符合某个模式的文本。php中文网给大家带来了有关正则表达式的相关教程以及文章,希望对大家能有所帮助。

258

2023.07.05

java正则表达式语法
java正则表达式语法

java正则表达式语法是一种模式匹配工具,它非常有用,可以在处理文本和字符串时快速地查找、替换、验证和提取特定的模式和数据。本专题提供java正则表达式语法的相关文章、下载和专题,供大家免费下载体验。

766

2023.07.05

java正则表达式匹配字符串
java正则表达式匹配字符串

在Java中,我们可以使用正则表达式来匹配字符串。本专题为大家带来java正则表达式匹配字符串的相关内容,帮助大家解决问题。

219

2023.08.11

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

3

2026.03.11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号