JavaScript表单非空校验需监听form submit事件并调用preventDefault()，用trim()判断空值，聚焦首个错误字段并提示，最后手动submit。

在 JavaScript 中实现表单提交前的非空校验，核心是**拦截表单默认提交行为**，遍历需要校验的字段，检查其值是否为空（或仅为空格），有空则阻止提交并给出提示。

监听表单 submit 事件

不要用按钮的 click 事件，而应监听 form 元素的 submit 事件。因为该事件会在任何方式触发提交时（回车、点击提交按钮等）统一触发，且可通过 event.preventDefault() 可靠阻止默认行为。

• 给 form 添加 id="myForm" 或直接用 document.querySelector('form')
• 绑定 addEventListener('submit', handler)
• 第一行写 event.preventDefault()，确保不跳转、不刷新

判断“非空”的合理逻辑

不能只用 value === ''，要兼顾用户输入空格、制表符、换行符等情况：

• 推荐用 value.trim() === '' —— 去除首尾空白后再判断
• 对必填的 ，检查 selectedIndex === 0 或 value === ''
• 对 同样适用 trim()
• 避免用 !value，因为 '0'、'false' 等会被误判为“空”

聚焦第一个错误项并提示用户

提升体验的关键细节：

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

• 找到第一个为空的字段后，调用 element.focus() 让光标定位过去
• 用 alert() 简单提醒（开发调试可用），但生产环境建议用页面内提示（如紧邻输入框加红色文字）
• 可为每个输入框添加 data-required="true" 属性，便于统一识别必填项

一个简洁可用的示例

HTML 片段：

登录

JavaScript：

document.getElementById('loginForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const inputs = this.querySelectorAll('[required]');
  for (let input of inputs) {
    if (!input.value.trim()) {
      alert(input.placeholder + ' 不能为空');
      input.focus();
      return;
    }
  }
  this.submit(); // 全部通过，手动提交（如果需走原生提交流程）
});

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南