在表单提交前检查字段并停止操作,核心做法是监听 submit 事件并在回调中调用 event.preventdefault()。你需要获取表单元素,绑定该事件,在内部验证输入值,若发现无效则阻止默认行为,否则允许提交。

submit 事件如何拦截默认行为
通过给表单添加 onsubmit 属性或绑定 addEventListener,可以在数据发送到服务器前介入。当事件触发时,传入的事件对象包含 preventDefault 方法,调用它即可取消表单的自动跳转或刷新。

<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调试
通过 JDWP 实现 Java 远程调试:连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。
术语注解
JDWP:Java Debug Wire Protocol,Java 调试有线协议(Java 远程调试底层通信协议)
remote JVM:远程 Java 虚拟机
step through code:代码单步调试(步入 / 步过 / 步出调试)
inspect variables:变量查看 / 变量检视
stac
下载

<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(),表单不会提交,页面也不会刷新。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南