在表单提交前检查字段并停止操作，核心做法是监听 submit 事件并在回调中调用 event.preventdefault()。你需要获取表单元素，绑定该事件，在内部验证输入值，若发现无效则阻止默认行为，否则允许提交。
submit 事件如何拦截默认行为
通过给表单添加 onsubmit 属性或绑定 addEventListener，可以在数据发送到服务器前介入。当事件触发时，传入的事件对象包含 preventDefault 方法，调用它即可取消表单的自动跳转或刷新。
<form id="myForm">
<input type="text" id="username" required>
<button type="submit">提交</button>
</form>
<script>
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
const username = document.getElementById('username').value;
if (username.length < 3) {
alert('用户名至少需要3个字符');
event.preventDefault(); // 停止提交
}
});
</script>
如何根据特定条件动态禁用提交按钮
除了阻止事件，还可以直接控制提交按钮的状态。在输入框的 input 事件中监听值的变化，当满足特定条件（如密码强度不足）时，将按钮的 disabled 属性设为 true，从而从视觉上阻止用户点击。
立即学习“Java免费学习笔记（深入）”；
<form id="secureForm">
<input type="password" id="pwd">
<button type="submit" id="submitBtn" disabled>提交</button>
</form>
<script>
const pwdInput = document.getElementById('pwd');
const submitBtn = document.getElementById('submitBtn');
pwdInput.addEventListener('input', function() {
if (pwdInput.value.length >= 8) {
submitBtn.disabled = false;
} else {
submitBtn.disabled = true;
}
});
// 双重保险：即使启用按钮，提交时再次检查
secureForm.addEventListener('submit', function(event) {
if (pwdInput.value.length < 8) {
event.preventDefault();
}
});
</script>
当输入值为空字符串时程序的具体表现
在上述代码逻辑中，如果用户未输入任何内容直接点击提交，username 的值将是空字符串 ""。此时 username.length 为 0，小于 3，因此会触发 alert 并执行 preventDefault()，表单不会提交，页面也不会刷新。
