HTML表单提交问题

阅读数：1次 2018-10-15

字数统计: 1.1k字 | 阅读时长≈ 4分

如何验证表单？验证成功与否、是否提交？看完这篇文章也许你就会明白了。

前言：

一开始学HTML时，不会就经常百度、谷歌，这次的遇到的表单验证及提交问题我也搜过了，各路大神各显神通，答案各异，试过很多种方法，各种问题也层出不穷……现在我想写点我的想法，希望能给有需要的人一些帮助。

现在进入主题：如何验证表单？验证成功与否、是否提交？先声明，这里我把重点放在后面那个问题上，前面就简单验证。

废话不多说，直接上代码：（注：这个代码是可以运行的，可以自己试试，把重点放在js和表单里面！）

<!DOCTYPE html>
<html>
  <head>
    <title>表单验证之submit提交.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 <style type="text/css">
    form{
			width: 340px;					/*设置宽度，方便使其居中*/
			margin: 40px auto auto auto;	/*上右下左*/
			font-size: 35px;
	}
	input{
			margin-top: 5px;
			height: 30px;
			width: 12em;
			margin-bottom: 5px;
	}
	#login{
			font-family: 微软雅黑;
			font-size: 40px;
			text-align: center;
			margin-top: 200px;
	}
	input[type="submit"],input[type="reset"] {
			height: 25px;
			width: 5em;
			margin-left: 7px;
	}
</style>
    
<script type="text/javascript">
  function isSubmit(){
 
  	var username = document.getElementById("username").value;
  	var password = document.getElementById("password").value;
  	
  	//简单判断，如果账号密码都不为空串，返回true
  	//并添加console.log()，在控制台查看if里面判断语句的返回结果
  	if (username!="" && password!="") {
  		console.log(username!="" && password!="");
		return true;
	}else{
		console.log(username!="" && password!="");
		confirm("账号或密码为空，请填写完整");
		return false;
	}
  }
</script>
  </head>
  <body >
  	 <p id="login">用户登录:</p>
	 <form action="http://www.w3school.com.cn/" method="post" onsubmit="">
		<table>
			<tr>
				<td>用户名：</td>
				<td><input type="text" id="username" name="username" onblur=""/></td>
			</tr>
			<tr>
				<td>密 &nbsp;&nbsp;码：</td>
				<td><input type="password" id="password" name="password" onblur=""/></td>
			</tr>
			<tr><td></td>
				<td>
					<input type="submit" value="登录" onclick="return isSubmit()"/>
					<input type="reset" value="取消"/>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

我这里只是验证账号密码是否有填写，如果都有填写返回true，反之返回false并给出提示。中间还用了一个小技巧,使用了console.log()方法，该方法输出的数据可在按F12后的控制台那里看到，方便分析。其它就不详解。

接下来我们来分析下：

情况1：(可行的)

1	<input type="submit" value="登录" onclick="return isSubmit()"/>

submit 这里的 οnclick=“return isSubmit()” ，即点击时，执行方法isSubmit()，并带回返回值true或者false，如果是true则执行默认操作（即提交表单），如果返回false则禁止默认操作（即不提交表单）。

情况2：(不可行的)（注：没见过的可以自己改代码试试）

1	<input type="submit" value="登录" onclick="isSubmit()"/>

如果你仅仅是这样用：即不加return，那么就会出意外了，F12的控制台显示false，但是表单可以提交！！这是什么情况？？我也不知道，不过好像很多初学者都会犯这个错误，我看到有位仁兄是这样说的：“return 表示从被调函数返回到主调函数继续执行，返回时可附带一个返回值，如果返回是false则不继续执行”，我觉得说的挺好的（捂脸）……

情况3：(不可行的)

1	<input type="submit" value="登录" onsubmit="return isSubmit()"/>

这里是把js事件改为onsubmit事件，但是不起作用，因为这个事件是表单form都有的，而input的！（再看下面的，你就会明白。）

情况4：(可行的)

1	<form action="http://www.w3school.com.cn/" method="post" onsubmit="return isSubmit()">

把onsubmit事件放在form的标签里面，发现可以正常验证。

情况5：(不可行的)

1	<form action="http://www.w3school.com.cn/" method="post" onsubmit="isSubmit()">

去掉return后，测试发现，还是不行，果然还是得加上！

好了，就是这些了，这仅仅是个人拙见，如果发现有错，欢迎大家指正。

本文作者： 荷塘月色
发布时间： 2018-10-15
最后更新： 2018-10-15
本文标题： HTML表单提交问题
本文链接： https://www.yansheng.xyz/article/5f15988.html
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！