按钮本身不自动提交表单，关键在于阻止表单默认提交行为；验证失败时通过onsubmit返回false或addEventListener中调用preventDefault()阻止提交。
按钮本身不会自动提交表单，真正触发提交的是 type="submit" 的按钮（或回车）——所以关键不在“阻止按钮”，而在于**阻止表单的默认提交行为**。只要验证失败，就让表单不提交即可。
用 onsubmit 阻止表单提交
最直接的方式是在 <form> 标签上使用 onsubmit 事件，并返回 false：
<form onsubmit="return validateForm()">
<input type="text" id="email" required>
<button type="submit">提交</button>
</form>
<script>
function validateForm() {
const email = document.getElementById('email').value;
if (!email.includes('@')) {
alert('邮箱格式不正确');
return false; // 阻止提交
}
return true; // 允许提交
}
</script>
用 addEventListener + preventDefault()
更现代、推荐的做法：监听表单的 submit 事件，调用 event.preventDefault() 阻止默认行为：
<form id="myForm">
<input type="text" id="username" required>
<button type="submit">注册</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
const username = document.getElementById('username').value.trim();
if (username.length < 2) {
e.preventDefault(); // 关键：阻止提交
alert('用户名至少2个字符');
}
});
</script>
注意 button 的 type 属性
确保按钮是 type="submit"（默认值），否则点击不会触发表单提交：
立即学习“前端免费学习笔记（深入）”；
-
<button>提交</button>→ 默认就是type="submit"，会提交表单 -
<button type="button">提交</button>→ 不提交，需手动调用form.submit() -
<button type="reset">重置</button>→ 重置表单，不提交
结合 HTML5 原生验证更省心
如果只是基础校验（必填、邮箱、长度等），可先用 required、type="email" 等属性，再用 checkValidity() 统一判断：
<form id="loginForm">
<input type="email" required placeholder="邮箱">
<input type="password" required minlength="6">
<button type="submit">登录</button>
</form>
<script>
document.getElementById('loginForm').addEventListener('submit', function(e) {
if (!this.checkValidity()) {
e.preventDefault();
// 可选：显示浏览器默认提示或自定义提示
}
});
</script>
