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() === ''—— 去除首尾空白后再判断 - 对必填的
<select></select>，检查selectedIndex === 0或value === '' - 对
<textarea></textarea>同样适用trim() - 避免用
!value，因为'0'、'false'等会被误判为“空”
聚焦第一个错误项并提示用户
提升体验的关键细节：
立即学习“Java免费学习笔记（深入）”；
- 找到第一个为空的字段后，调用
element.focus()让光标定位过去 - 用
alert()简单提醒（开发调试可用），但生产环境建议用页面内提示（如紧邻输入框加红色文字） - 可为每个输入框添加
data-required="true"属性，便于统一识别必填项
一个简洁可用的示例
HTML 片段：
<form id="loginForm"> <input type="text" name="username" placeholder="请输入用户名" required> <input type="password" name="password" placeholder="请输入密码" required> <button type="submit">登录</button> </form>
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(); // 全部通过，手动提交（如果需走原生提交流程）
}); 
