button阻止form表单失效优化处理

最新推荐文章于 2023-04-09 21:01:38 发布

米格战斗机

最新推荐文章于 2023-04-09 21:01:38 发布

阅读量562

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery / Javascript HTML / CSS

本文链接：https://blog.youkuaiyun.com/qiuzhi__ke/article/details/90693235

jQuery / Javascript 同时被 2 个专栏收录

49 篇文章

订阅专栏

HTML / CSS

21 篇文章

订阅专栏

博客聚焦于JS函数验证失败但form仍提交数据的场景，将对该问题展开分析并给出处理方案，涉及前端开发中表单验证与提交的关键环节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：js函数验证失败，终止函数，但是form依然提交数据；

以下分析处理方案：

function check(){
	var begindate=document.aform.begindate.value;
	var enddate=document.aform.enddate.value;
	
	if(!begindate || !enddate){
		alert("请输入日期。");
		//return;
		return false;
	}		
        document.aform.submit();
}
	
<form action="" method="Post" name="aform">
        <!-- 其他省略。。。。-->
	<button onclick="check();">提交</button>
</form>


优化方式一：
增加属性type，默认省略的是submit属性
<button type="button" onclick="check();">提交</button>

优化方式二：
修改函数：return;-->return false;
修改事件调用：<button onclick="return check();">提交</button>