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

花韻仙語

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

905人浏览过

来源于php中文网

原创

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

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

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

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

Moshi Chat

法国AI实验室Kyutai推出的端到端实时多模态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插件有哪些

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中文网欢迎大家前来学习。

405

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

Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开，系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示，帮助开发者构建稳定高效的 Go 并发任务处理系统，提高系统在高负载环境下的处理能力与稳定性。

2026.03.10

热门下载

网站特效

网站源码

网站素材

前端模板