Web前端开发：用JavaScript阻止表单提交

Web开发中，表单提交的客户端控制是常见需求，而JavaScript有多种方式可以阻止表单提交。

例如：

// 方法1：事件对象的preventDefault()
document.getElementById('myForm').addEventListener('submit', function(e) {e.preventDefault();// 表单验证逻辑if (!validateForm()) {return; // 验证失败不提交}// 验证通过后的处理
});// 方法2：return false
<form onsubmit="return validateForm()"><input type="text" required><button type="submit">提交</button>
</form><script>
function validateForm() {// 验证逻辑if (/* 验证失败 */) {return false; // 阻止提交}return true; // 允许提交
}
</script>

在React等框架中：

function ContactForm() {const handleSubmit = (e) => {e.preventDefault();// 处理表单数据};return (<form onSubmit={handleSubmit}><input type="email" name="email" /><button type="submit">发送</button></form>);
}

安全提示：为了防止JS代码被查看和分析，可以使用JShaman进行JS代码混淆加密防止代码逻辑泄露。

主要用途：用JS验证或阻止表单提交是在客户端的，这可以显著的减轻服务器压力。