JavaScript 表单提交的三种方法

最新推荐文章于 2024-10-10 16:21:32 发布

houyanhua1

最新推荐文章于 2024-10-10 16:21:32 发布

阅读量1.5w

点赞数 8

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/houyanhua1/article/details/78568078

版权

JavaScript 专栏收录该内容

140 篇文章 4 订阅

订阅专栏

表单提交的三种方法：
1、submit按钮，结合form标签的onsubmit事件。 <form name="form1" method="post" action="login.php" οnsubmit="return checkForm()" > </form> checkForm()需要return
2、submit按钮，结合onclick事件。 <input type="submit" value="提交表单" οnclick="return checkForm()" /> checkForm()需要return
3、button按钮，结合onclick事件。 <input type="button" value="提交表单" οnclick="return checkForm()" /> js中：checkForm(){document.form1.submit();} 不需要return

1、submit按钮，结合form标签的onsubmit事件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//实例：submit按钮，结合onsubmit事件，验证和提交表单
function checkForm()
{
	//判断用户名是否为空，需要return
	if(document.form1.username.value=="")
	{
		window.alert("用户名不能为空！");
		return false;
	}else if(document.form1.username.value.length<5 || document.form1.username.value.length>20)
	{
		window.alert("用户名长度必须介于5-20个字符之间！");
		return false;
	}
}
</script>
</head>
<body>

<form name="form1" method="get" action="login.php">
用户名：<input type="text" name="username" />
密码：<input type="password" name="userpwd" />
<input type="submit" value="提交表单" οnsubmit="return checkForm()" />
</form>


</body>
</html>

2、submit按钮，结合onclick事件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//实例：submit按钮，结合onclick事件，验证和提交表单
function checkForm()
{
	//判断用户名是否为空，需要return
	if(document.form1.username.value=="")
	{
		window.alert("用户名不能为空！");
		return false;
	}else if(document.form1.username.value.length<5 || document.form1.username.value.length>20)
	{
		window.alert("用户名长度必须介于5-20个字符之间！");
		return false;
	}
}
</script>
</head>
<body>
<form name="form1" method="get" action="login.php">
用户名：<input type="text" name="username" />
密码：<input type="password" name="userpwd" />
<input type="submit" value="提交表单" οnclick="return checkForm()" />
</form>

</body>
</html>

3、button按钮，结合onclick事件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//实例：button按钮，结合onclick事件，验证和提交表单
function checkForm()
{
	//判断用户名是否为空，不需要return
	if(document.form1.username.value=="")
	{
		window.alert("用户名不能为空！");
	}else if(document.form1.username.value.length<5 || document.form1.username.value.length>20)
	{
		window.alert("用户名长度必须介于5-20个字符之间！");
	}else
	{
		//使用form对象的submit()方法，实现提交，不用return
		document.form1.submit();
	}
}
</script>
</head>
<body>
<form name="form1" method="get" action="login.php">
用户名：<input type="text" name="username" />
密码：<input type="password" name="userpwd" />
<input type="button" value="提交表单" οnclick="checkForm()" />
</form>

</body>
</html>