在表单提交前检查字段状态，最直接的办法是监听 submit 事件并在回调中调用 event.preventdefault()。通过 document.queryselector 获取目标元素，读取其 .value 属性判断是否为空或格式不符，若校验失败则阻止默认提交行为并提示用户。
submit 事件拦截的具体实现步骤是什么
使用 addEventListener 绑定 submit 事件，在回调函数内通过 event.preventDefault() 中断流程。获取输入框的 .value 进行非空判断，如果为空则返回 false 或仅阻止默认行为，从而停留在当前页面。
const form = document.querySelector('#myForm');
form.addEventListener('submit', function(event) {
const inputField = document.querySelector('#username');
if (inputField.value.trim() === '') {
event.preventDefault();
alert('用户名不能为空');
}
});如何区分 click 按钮与 enter 键触发的提交
submit 事件会统一处理这两种触发方式，无需分别监听。但在需要特定逻辑时，可以通过 event.submitter 获取触发提交的按钮元素，或者通过 event.key 判断按键类型（仅在 keydown 事件中可用）。对于纯校验场景，submit 事件已足够覆盖所有提交意图。
立即学习“Java免费学习笔记（深入）”；
// 假设 HTML 中有两个提交按钮
// <button type="submit" name="action" value="save">保存</button>
// <button type="submit" name="action" value="delete">删除</button>
form.addEventListener('submit', function(event) {
// event.submitter 指向实际点击的按钮
console.log(event.submitter.name); // 'action'
console.log(event.submitter.value); // 'save' 或 'delete'
// 根据按钮值执行不同逻辑
if (event.submitter.value === 'delete') {
if (!confirm('确定要删除吗？')) {
event.preventDefault();
}
}
});当字段包含特殊字符或空格时，trim() 的作用是什么
trim() 方法用于去除字符串首尾的空格、制表符等空白字符。在表单校验中，用户可能无意中输入前后空格，导致看似非空的字段实际上没有有效内容。调用 value.trim() === '' 能更准确地判断字段是否真正有用户输入的内容，避免将纯空格视为有效数据。
