onsubmit控制表单提交

最新推荐文章于 2022-11-30 12:21:28 发布

飞翔的布布熊

最新推荐文章于 2022-11-30 12:21:28 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签：表单提交 onsubmit

本文链接：https://blog.youkuaiyun.com/mts132132132/article/details/79469574

笔记专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用HTML表单的onsubmit属性结合JavaScript进行表单提交前的验证，确保只有符合要求的数据才能被提交。

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

在做页面的时候，我们经常会涉及到表单的填写和提交，有一个需求就是当填写的内容不符合要求时，表单最终无法提交成功，这时就需要我们来控制表单能否进行提交。

<form>标签有个非常有用的属性叫onsubmit，我们可以通过它进行控制表单内容能否提交，onsubmit的属性值为布尔型，即为true时可以正常提交，为false时不能提交。

<body>
		<form action="" method="post" onsubmit="return tosubmit()">
			昵称：<input type="text" id="name" /><br />
			密码：<input type="password" id="password" /><br />
			<button type="submit">登录</button>
		</form>
		<script>
			function tosubmit(){
				var nm=document.getElementById("name").value;
				alert(nm);
				if(nm=="张三"){
					alert("可以提交");
					return true;
				}else{
					alert("验证失败");
					return false;
				}
			}
		</script>
	</body>

如图示代码，当点击提交按钮的时候，会调用tosubmit（）方法去验证提交的内容，验证通过的话，返回true，form表单正常提交，验证没通过的话则返回false，不做提交表单的操作。