如何用纯 JavaScript 实现表单前端验证并阻止无效提交

花韻仙語

发布时间：2026-03-11 11:28:07

905人浏览过

来源于php中文网

原创

如何用纯 JavaScript 实现表单前端验证并阻止无效提交

本文介绍如何使用原生 javascript 在用户点击提交时执行多字段验证，仅当所有校验通过才提交表单至后端（如 process.php），全程无需 jquery 或框架，强调可控性、可读性与调试友好性。

本文介绍如何使用原生 javascript 在用户点击提交时执行多字段验证，仅当所有校验通过才提交表单至后端（如 process.php），全程无需 jquery 或框架，强调可控性、可读性与调试友好性。

在 Web 表单开发中，仅依赖后端验证（如 PHP 的 process.php）存在明显缺陷：用户体验差、网络开销大、且无法即时反馈错误。前端验证作为第一道防线，能显著提升交互质量。本文提供一套轻量、可扩展、零依赖的纯 JavaScript 表单验证方案，完全兼容传统

皮卡智能

AI驱动高效视觉设计平台

下载

结构，核心思想是：拦截默认提交行为，先校验再决定是否触发真实提交。

✅ 核心实现逻辑

禁用默认提交机制：不使用或
集中校验函数：编写 errorsFormFrontEnd()，返回错误字段名数组（如 ["email", "phone"]），便于统一处理与扩展；
条件提交控制：在主函数 validateFormOrSubmit() 中判断错误数组长度，为 0 时调用 form.submit() 执行真实 POST；否则仅更新错误提示，不提交。

? 完整可运行示例（含注释）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>纯 JS 表单验证</title>
</head>
<body>

<form id="theForm" action="process.php" method="POST">
  <label>姓名：<input type="text" id="firname" name="firname"></label><br><br>
  <label>邮箱：<input type="email" id="email" name="email"></label><br><br>
  <label>手机号：<input type="tel" id="phnc" name="phnc"></label><br><br>
  <div id="form_error_message" style="color: #d32f2f; font-weight: bold;"></div>
  <br>
  <button type="button" onclick="validateFormOrSubmit()">提交</button>
</form>

<script>
function errorsFormFrontEnd() {
  const errors = [];
  const trim = (s) => s?.trim() || '';

  // ✅ 姓名必填且至少2字符
  if (trim(document.getElementById('firname').value).length < 2) {
    errors.push('姓名');
  }

  // ✅ 邮箱格式校验（基础正则）
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(trim(document.getElementById('email').value))) {
    errors.push('邮箱');
  }

  // ✅ 手机号：11位数字（中国示例）
  const phoneRegex = /^1[3-9]\d{9}$/;
  if (!phoneRegex.test(trim(document.getElementById('phnc').value))) {
    errors.push('手机号');
  }

  return errors;
}

function validateFormOrSubmit() {
  const errors = errorsFormFrontEnd();
  const errorMsgEl = document.getElementById('form_error_message');

  if (errors.length === 0) {
    // ✅ 所有校验通过 → 提交表单（将触发 POST 到 process.php）
    document.getElementById('theForm').submit();
  } else {
    // ❌ 存在错误 → 显示友好提示（可进一步优化为字段级高亮）
    errorMsgEl.innerHTML = `请修正以下字段：${errors.join('、')}。`;
  }
}
</script>

</body>
</html>

⚠️ 关键注意事项

ID 必须唯一且匹配：每个必须设置 id 属性（如 id="email"），JavaScript 才能精准获取其值；
name 属性不可省略：它是表单提交时的字段键名，确保后端（如 PHP 的 $_POST['email']）能正确接收数据；
空格处理很重要：务必对 .value 调用 .trim()，避免用户仅输入空格导致“看似填写实则为空”的误判；
正则校验需按需调整：示例中的邮箱/手机号正则适用于常见场景，生产环境应根据业务规则增强（如支持国际号码、更严格邮箱规范）；
错误提示可精细化：当前使用统一提示框，进阶做法是为每个字段添加，并在 errorsFormFrontEnd() 中返回 { field: 'email', message: '邮箱格式不正确' } 对象数组，实现精准定位；
不要重命名函数为 submit()：

? 总结

该方案以最小侵入方式强化了表单健壮性：它不改变原有 HTML 结构与后端逻辑，仅通过按钮类型切换 + JavaScript 校验拦截，就实现了“验证不通过绝不发请求”的目标。代码模块清晰（校验逻辑分离、提交逻辑独立）、易于维护、便于单元测试，是原生 JavaScript 表单验证的实用范本。记住：前端验证是体验优化，永远不能替代后端验证——process.php 仍需做完整服务端校验与安全过滤。

相关标签:

jquery 表单验证 Error class 对象作用域 input

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：PHP表单数据怎么获取_PHP $_POST $_GET使用【教程】下一篇：MongoDB 文档深度合并：PHP 中实现未知结构的动态字段更新

作者最新文章

怎么在vscode中画3d图

2026-03-09 16:53

如何实现滚动到指定区域时触发动画线条效果

2026-03-09 17:18

索尼PC游戏卖不动玩家吐槽其发售晚价格贵质量不行

2026-03-09 17:36

如何在单页中正确结合 AJAX 与 PHP 实现无刷新用户名验证

2026-03-09 17:38

抖音爆款视频怎么拍？抖音怎么拍视频好看

2026-03-09 17:42

Go 标准库中解析 HTML 表单嵌套数组的实践与替代方案

2026-03-09 17:52

HTML中动态插入变量值的正确写法与常见错误解析

2026-03-09 17:53

vscode怎么一键改变量名

2026-03-09 17:56

Go 语言中如何在 switch 分支中动态创建符合接口的接收者实例

2026-03-09 17:58

如何在 Go 语言测试中正确模拟表单 POST 请求

2026-03-09 17:59

热门AI工具

DeepSeek

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

AI编程开发 AI聊天问答

豆包大模型

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

AI编程开发 AI大模型

通义千问

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

AI编程开发 Agent智能体

腾讯元宝

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

文档处理 Excel 表格

文心一言

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

AI编程开发 AI文本写作

讯飞写作

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

AI文本写作中文写作

即梦AI

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

图片拼接图画生成

ChatGPT

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

AI编程开发 AI文本写作

智谱清言 - 免费全能的AI助手

AI编程开发 Agent智能体

相关专题

jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容，供大家免费下载体验。

156

2023.09.12

jquery怎么操作json

操作的方法有：1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”；3、“$.each(obj, callback)”；4、“$.ajax()”。更多jquery怎么操作json的详细内容，可以访问本专题下面的文章。

334

2023.10.13

jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题，详情请看本专题下面的文章。php中文网欢迎大家前来学习。

406

2023.11.10

jQuery hover()方法的使用

hover()是jQuery中一个常用的方法，它用于绑定两个事件处理函数，这两个函数将在鼠标指针进入和离开匹配的元素时执行。想了解更多hover()的相关内容，可以阅读本专题下面的文章。

515

2023.12.04

jquery实现分页方法

在jQuery中实现分页可以使用插件或者自定义实现。想了解更多jquery分页的相关内容，可以阅读本专题下面的文章。

312

2023.12.06

jquery中隐藏元素是什么

jquery中隐藏元素是非常重要的一个概念，在使用jquery隐藏元素之前，需要先了解css样式中关于元素隐藏的属性，比如display、visibility、opacity等属性。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

128

2024.02.23

jquery中什么是高亮显示

jquery中高亮显示是指对页面搜索关键词时进行高亮显示，其实现办法：1、先获取要高亮显示的行，获取搜索的内容，再遍历整行内容，最后添加高亮颜色；2、使用“jquery highlight”高亮插件。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

183

2024.02.23

jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全，阅读专题下面的文章了解更多详细内容。

2026.01.13

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

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

2026.03.11

热门下载

网站特效

网站源码

网站素材

前端模板