HTML——JS—根据条件提交或阻止提交表单

最新推荐文章于 2022-05-10 14:22:47 发布

Jhinhua

最新推荐文章于 2022-05-10 14:22:47 发布

阅读量909

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/piduocheng0577/article/details/104942424

版权

Web前端专栏收录该内容

72 篇文章 2 订阅

订阅专栏

表单提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 在表单中数据之所以能提交成功 是因为表单的 onsubmit事件的 结果
		 默认是return true
		 
		 阻止表单提交 只需要对onsubmit事件return  false即可
		 -->
		<form action="" method="get" onsubmit="return false">
			<p>用户名：<input type="text" name="uname"></p>
			<p>密码：<input type="password" name="upsw"></p>
			<p><input type="submit" value="登录"></p>
		</form>
	</body>
</html>

案例1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 表单的提交事件 是在表单的属性中写的
		 注意一下  JS的函数的运行的结果是true或者false
		 submit要求的是return  true 或者 return false
		 
		 所以 绑定函数的时候 return必须添加
		 
		 假设没有 return  代码直接写成 onsubmit="submit_data()"
		 那么onsubmit这个的数据 就表示为  onsubmit=true  或者  onsubmit=false
		 所以这一块必须添加return
		 -->
		<form action="" method="get" onsubmit="return submit_data()">
			<p>用户名：<input type="text" class="username" name="uname"></p>
			<p>密码：<input type="password" class="psw" name="upsw"></p>
			<p><input type="submit" value="登录"></p>
		</form>
		
		<script>
			/**
			 * 已知的用户名  admin
			 * 已知的密码：  admin123
			 */
			var username = "admin"
			var passwd = "admin123"
			function submit_data(){
				// 获取用户输入的用户名和密码
				var name_input = document.querySelector(".username")
				var pwd_input = document.querySelector(".psw")
				// name_input.value 输入框的数据
				if(name_input.value == username && pwd_input.value == passwd){
					return true
				}else{
					alert("用户名或者密码错误")
					// 阻止提交
					return false
				}		
			}
			
			
		</script>
	</body>
</html>

案例2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<form action="" method="get"  class="form">
			<p>用户名：<input type="text" class="username" name="uname"></p>
			<p>密码：<input type="password" class="psw" name="upsw"></p>
			<p><input type="submit" value="登录"></p>
		</form>
		
		<script>
			/**
			 * 已知的用户名  admin
			 * 已知的密码：  admin123
			 */
			var username = "admin"
			var passwd = "admin123"
			
			// 获取表单
			var form = document.querySelector(".form")
			
			// 为其添加提交事件
			form.onsubmit = function(){
				// 获取用户输入的用户名和密码
				var name_input = document.querySelector(".username")
				var pwd_input = document.querySelector(".psw")
				// name_input.value 输入框的数据
				if(name_input.value == username && pwd_input.value == passwd){
					return true
				}else{
					alert("用户名或者密码错误")
					// 阻止提交
					return false
				}
				
			}
			
		</script>
	</body>
</html>

Jhinhua

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML——JS—根据条件提交或阻止提交表单

表单提交 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 在表单中数据之所以能提交成功是因为表单的 onsubmit事件的结果默...
复制链接

扫一扫