注册和登录js操作

最新推荐文章于 2023-07-04 10:22:38 发布

ITDaBao

最新推荐文章于 2023-07-04 10:22:38 发布

阅读量917

点赞数

分类专栏： WEB前端文章标签： java js

本文链接：https://blog.csdn.net/weixin_45177027/article/details/115481715

版权

WEB前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客探讨了如何使用HTML和JavaScript实现网页上的注册和登录表单验证。注册表单包括用户名、密码和确认密码字段，通过JavaScript进行空值和密码匹配检查。登录表单则包含用户名和密码，同样进行了空值验证。验证过程通过onsubmit事件触发，确保在提交数据前进行了必要的数据校验。

摘要由CSDN通过智能技术生成

注册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注冊</title>
	</head>
	<body>
		<form action="submmit.html" method="get" onsubmit="return fun()">
			用户名<input id="username" type="text">
			<br>
			密码<input id="password" type="password">
			<br>
			确认密码<input id="password2" type="password">
			<br>
			<input type="submit" value="注册">
		</form>
		<script type="text/javascript">
			function fun(){
				var username = document.querySelector("#username").value
				var password = document.querySelector("#password").value
				var password2=document.querySelector("#password2").value
				if(username==""  || password ==""  ||password2==""){
					alert("用户名或者密码不能为空")
					return false;
				}else if(password!=password2){
					alert("輸入不一致，請重新輸入")
					document.querySelector("#password").value=""
					document.querySelector("#password2").value=""
					return false;
				}else{
					return true;
				}
				}
		</script>
	</body>
</html>

!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 数据校验：
		     在登录界面 如果用户输入用户名和密码之后 走action去判断数据存在否---走后台的
			 但是如果用户没有输入用户名和密码  那么无法走action操作
			 form---onsubmit事件 这个事件必须返回一个boolean类型的值  这个值如果为true 那么继续走action操作
			 如果为false那么就不走action了  就停止提交数据
		 
		 -->
		<form action="http://www.baidu.com" method="get" onsubmit="return fun()">
			用户名<input type="text" id="username" name="username" value="" /><br>
			密码<input type="password" id="password" name="password" value="" /><br>
			<input type="submit" value="提交"/>
		</form>
		<script type="text/javascript">
			function fun(){
				var username = document.querySelector("#username").value
				var password = document.querySelector("#password").value
				if(username==""  || password ==""){
					alert("用户名或者密码不能为空")
					return false;
				}else{
					return true;
				}
				
			}
		</script>
	</body>
</html>