html+css+js基础部分，学习与制作一个简单的登录注册功能页面

最新推荐文章于 2024-09-03 14:47:13 发布
最新推荐文章于 2024-09-03 14:47:13 发布
阅读量6.9k 收藏 96
点赞数 10
文章标签： html css jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61044714/article/details/121418010
版权

首先我们需要在一个页面内使用html代码写出注册与登录

 点击注册页面时显示注册页面并隐藏登录页面，登录页面同理，可以将两个页面用不同的div包起来并使用show();hide();来进行实现。

注册页面

 首先我们需要规定用户名长度格式以及是否存在相同用户名，密码的长度可以使用正则表达式来实现。确认密码则需要跟第一次密码输入一致，验证码则需要根据获取的4位验证码进行对比是否一致。如果不满足条件则会在input框后面隐藏的span标签中进行提示，这里需要给input添加一个离焦事件来实现。

 

 发送验证码按钮需要在用户名与密码填写完成的情况下才可以发送，发送验证码用到Math.random();这里要注意该方法的范围，且我们需要的时4位验证码需要考虑首位为0的情况，这里提供一个简单思路，可以使用4次Math.random()*10;转换为整数，这个可以获得4个随机0-9之间的整数，将他们转换成字符进行拼接即可变为一个4位验证码。

注册按钮则是在用户名、密码、确认密码、验证码都完成且正确完成注册，完成后我们将用户名信息和密码可以存放到数组中。

登录页面

登录页面与注册页面的实现方法大致相同，需要注意的时，登录的用户名判断时如果用户名存在才可以登录，而注册页面时用户名存在则不可以注册，这部分是相反的。

在点击登录按钮时我们需要获取用户名与密码输入的内容与数组里面一致才可以登录，这里也提供一个简单的思路，我们可以将用户名与密码分别存放在两个数组内，通过下标来联系两个数组使得相同下标的两个数组内存放的值分别是用户名和密码，在进行校验时只需通过循环遍历用户名数组找到相同值获取下标并利用该下标进行密码的校验即可。

下面是这个简单注册登录的全部代码，还做了登录成功以后会显示用户信息以及修改密码的功能，读者可以在阅读后进行参考来实现这部分的内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.12.4.js"></script>
	</head>
	<body>
		<div id="logining">
			<h1>首页</h1>
			<span id="index"></span>
			<div id="showsignin" style="display: none;">
				<br />
				用户名：<input id="usename" />
				<span id="tips1"></span><br />
				密码：<input id="passwd"  type="password"/>
				<span id="tips2"></span><br />
				确认密码：<input id="passwdagain" type="password"/>
				<span id="tips3"></span><br />
				验证码：<input id="code"/>
				<span id="codetips"></span><br />
				<span id="codetips1"></span><br />
				<button id="codebtu">点击发送验证码</button>
				<button id="signin">注册</button>
			
			</div>
			<div id="showlogin" style="display: none;">
				<br />
				用户名：<input id="_usename" />
				<span id="tips4"></span><br />
				密码：<input id="_passwd" />
				<span id="tips5"></span><br />
				验证码：<input id="_code"/>
				<span id="_codetips"></span><br />
				<span id="_codetips1"></span><br />
				<button id="_codebtu">点击发送验证码</button>
				<button id="login">登录</button>
			</div>
			<button id="fakesignin">注册页面</button>
			<button id="fakelogin">登录页面</button>
		</div>
		<div id="loginsuccess" style="display: none;">
			<h1><span id="success"></span></h1>
			<div>
				<ul>
				</ul>
			</div>
			<h1>修改密码</h1>
			新密码：<input id="newpasswd"/>
			<span id="newpasswdtips"></span><br />
			确认密码：<input id="newpasswdagain" />
			<span id="newpasswdagaintips"></span><br />
			<button id="change">修改密码</button>
		</div>
		<script>
			
			var username = ["zhangsan","wangwu"];
			var passwd = ["123123","111111"];
			var code=null;
			var code1=null;
			var successname;
			
			$("#fakesignin").click(function(){
				$("#index").html("注册页面")
				$("#showlogin").hide(500);
				$("#showsignin").show(1000);
			});
			
			$("#fakelogin").click(function(){
				$("#index").html("登录页面")
				$("#showsignin").hide(500);
				$("#showlogin").show(1000);
				
			});
			
			function _checkusername(a,b,c){						//检查用户名c=0时为注册检查c!=0时为登录检查
				var name = a.val();
				var namematch = /^[A-Za-z0-9]{6,15}$/
				if(!name.match(namematch)){
					b.html("<font color='red'>用户名必须在6-15位之间且不能用特殊符号</font>");
					return false;
				}else{
					for (var i = 0; i < username.length; i++) {
						if(name==username[i]){
							if(c==0){
								b.html("<font color='red'>用户名已存在</font>");
								return false;
							}else{
								b.html("<font color='green'>√</font>");
								return true;
							}
						}
					}
					if(i==username.length){
						if(c==0){
							b.html("<font color='green'>√</font>")
							return true;
						}else{
							b.html("<font color='red'>用户名不存在</font>")
							return false;
						}
					}
				}
			}
			
			function _checkpasswdagain(a,b,c){				//第二次密码校验是否和新密码相同
				var pass = a.val();
				var passagain = b.val();
				if(pass!=passagain){
					c.html("<font color='red'>两次密码必须一致</font>");
					return false;
				}else{
					c.html("<font color='green'>√</font>");
					return true;
				}
			}
			
			function _checkpasswd(a,b,c){					//密码检查c==0时为注册登录离焦，c==1时为修改密码时校验,c==2时登录时校验
				var pass = a.val();
				if(pass.length<6||pass.length>15){
					b.html("<font color='red'>密码必须在6-15位之间</font>")
					if(c==1){
						return -1;
					}else{
						return false;
					}
				}else{
					b.html("<font color='green'>√</font>")
					if(c==1){
						for (var i = 0; i < username.length; i++) {
							if(successname==username[i]){
								return i;
							}
						}
					}else if(c==2){
						for (var i = 0; i < username.length; i++) {
							if(username[i]==successname){
								if(pass==passwd[i]){
									return true
								}
							}
						}
						return false;
					}else{
						return true;
					}
				}
			}
			
			function arrplus(arr1,arr2){					//数组扩容
				var username1 = new Array(arr1.length+1);
				var passwd1 = new Array(arr2.length+1);
				for (var i = 0; i < arr1.length; i++) {
					username1[i]=arr1[i];
				}
				for (var i = 0; i < arr2.length; i++) {
					passwd1[i]=arr2[i];
				}
				username=username1;
				passwd=passwd1;
			}
			
			function _code(a,b,c){						//验证码校验
				if(c!=null){
					var usercode = a.val();
					if(usercode==c){
						b.html("<font color='green'>验证码正确</font>");
						return true;
					}else{
						b.html("<font color='red'>请输入正确的验证码</font>");
						return false;
					}
				}else{
					return false;
				}
			}
			
			$("#usename").blur(function(){				//注册用户名离焦事件
				_checkusername($("#usename"),$("#tips1"),0);			//三个参数1.输入框2.提示框3.方法(0注册1登录)
			});
			
			$("#passwd").blur(function(){				//注册密码离焦事件
				_checkpasswd($("#passwd"),$("#tips2"),0);			//三个参数1.输入框2.提示框3.方法(0注册登录1修改密码2登陆时校验)
			});
			
			$("#passwdagain").blur(function(){			//注册确认密码离焦事件
				_checkpasswdagain($("#passwd"),$("#passwdagain"),$("#tips3"));		//三个参数1.第一次密码输入框2.第二次密码输入框3.提示框
			});
			
			$("#codebtu").click(function(){				//生成验证码
				//判断用户名、密码、确认密码是否输入完成且合理
				if(_checkusername($("#usename"),$("#tips1"),0)&&_checkpasswd($("#passwd"),$("#tips2"),0)&&_checkpasswdagain($("#passwd"),$("#passwdagain"),$("#tips3"))){
					//生成4位验证码
					var one = parseInt(Math.random()*10);
					var two = parseInt(Math.random()*10);
					var three = parseInt(Math.random()*10);
					var four = parseInt(Math.random()*10);
					code = one.toString()+two.toString()+three.toString()+four.toString();
					$("#codetips").html(code);
				}else{
					alert("请先输入正确的用户名和密码")
				}
			});
			
			$("#code").blur(function(){					//验证码离焦事件
				_code($("#code"),$("#codetips1"),code);			//三个参数1.输入框2.提示框3验证码(code表示注册验证码,code1表示登录验证码)
			});
			
			$("#signin").click(function(){				//注册成功点击事件
				//判断用户名、密码、确认密码、验证码是否合理且正确
				if(_checkusername($("#usename"),$("#tips1"),0)&&_checkpasswd($("#passwd"),$("#tips2"),0)&&_checkpasswdagain($("#passwd"),$("#passwdagain"),$("#tips3"))&&_code($("#code"),$("#codetips1"),code)){
					var name = $("#usename").val();
					var pass = $("#passwd").val();
					//判断数组是否满了，满了进行数组扩容并将用户民密码放在数组最后一位，没满遍历数组将用户民密码放在第一个空的位置
					if(username[username.length]!=null||username[username.length]!=""){
						arrplus(username,passwd);			//数组扩容函数
						username[username.length-1]=name;
						passwd[passwd.length-1]=pass;
					}else{
						for (var i = 0; i < username.length; i++) {
							if(username[i]==null||username[i]==""||username[i]=="undefiend"){
								username[i]=name;
								passwd[i]=pass;
							}
						}
					}
					alert("注册成功");
					code=null;
					$("#usename").val("");
					$("#passwd").val("");
					$("#passwdagain").val("");
					$("#code").val("");
					$("#tips1").html("");
					$("#tips2").html("");
					$("#tips3").html("");
					$("#codetips").html("");
					$("#codetips1").html("");
				}else{
					alert("注册失败")
				}
			})
			
			$("#_usename").blur(function(){				//登录用户名离焦事件
				_checkusername($("#_usename"),$("#tips4"),1);	//三个参数1.输入框2.提示框3.方法(0注册，1登录)
			});
			
			$("#_passwd").blur(function(){				//登录密码离焦事件
				_checkpasswd($("#_passwd"),$("#tips5"),0);			//三个参数1.输入框2.提示框3.方法（0时为注册登录离焦，1时为修改密码时校验,2时登录时校验）
			})
			
			$("#_codebtu").click(function(){			//登录点击事件生成验证码
				//生成4位验证码
				var one = parseInt(Math.random()*10);
				var two = parseInt(Math.random()*10);
				var three = parseInt(Math.random()*10);
				var four = parseInt(Math.random()*10);
				code1 = one.toString()+two.toString()+three.toString()+four.toString();
				$("#_codetips").html(code1);
			});
			
			$("#_code").blur(function(){				//登录验证码离焦事件
				_code($("#_code"),$("#_codetips1"),code1);		//三个参数1.输入框2.提示框3.验证码(code为注册验证码，code1为登录验证码)
			})
			
			$("#login").click(function(){				//登录离焦事件
				successname = $("#_usename").val();
				//验证用户名、密码、验证码是否合理且正确
				if(_checkusername($("#_usename"),$("#tips4"),1)&&_checkpasswd($("#_passwd"),$("#tips5"),2)&&_code($("#_code"),$("#_codetips1"),code1)){
					for (var i = 0; i < username.length; i++) {
						var mes = $("<li>用户"+(i+1)+"："+username[i]+";密码："+passwd[i]+"</li>");
						$("ul").append(mes);
					}
					alert("登陆成功！")
					$("#_usename").val("");
					$("#_passwd").val("");
					$("#_code").val("");
					$("#tips4").html("");
					$("#tips5").html("");
					$("#_codetips").html("");
					$("#_codetips1").html("");
					$("#success").html("欢迎你"+successname)
					$("#logining").hide();
					$("#loginsuccess").show(1000);
				}else{
					alert("登陆失败！");
				}
			});
			
			$("#newpasswd").blur(function(){			//修改密码第一次输入离焦事件
				_checkpasswd($("#newpasswd"),$("#newpasswdtips"),1);		//三个参数1.输入框2.提示框3.方法(0登录注册离焦事件，1修改密码，2登录时校验)
			});
			
			$("#newpasswdagain").blur(function(){		//修改密码确认密码离焦事件
				_checkpasswdagain($("#newpasswd"),$("#newpasswdagain"),$("#newpasswdagaintips"));		//三个参数1.修改密码第一次密码输入框2.第二次输入框3.提示框
			});
			
			$("#change").click(function(){				//修改密码点击事件
				var index = _checkpasswd($("#newpasswd"),$("#newpasswdtips"),1);			//获取密码下标
				//判断密码是否一致
				if(index!=-1&&_checkpasswdagain($("#newpasswd"),$("#newpasswdagain"),$("#newpasswdagaintips"))){
					var pass = $("#newpasswd").val();
					passwd[index]=pass;
					alert("修改成功！")
					$("ul").empty();
					for (var i = 0; i < username.length; i++) {
						var mes = $("<li>用户"+(i+1)+"："+username[i]+";密码："+passwd[i]+"</li>");
						$("ul").append(mes);
					}
				}else{
					alert("修改失败！")
				}
			});
			
		</script>
		
	</body>
</html>

坏你拿过去
关注
简单登录注册界面模板（HTML+CSS+JavaScript）
12-28
简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。
html+css+js制作简单登录页面
最新发布
sinat_28344841的博客
09-29 441
简单登录功能页面
HTML+CSS 登录注册界面通用（一键复制）
我们好像在哪见过 私
09-03 1409
如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
html+css+js登录页面
01-31
简单登陆网页，使用html+js+css 本资源附带教程https://blog.csdn.net/qq_40832960/article/details/104100918 欢迎参考 蓝奏云:https://www.lanzous.com/iaqtc8f
一个文本框点击效果
郁闷之春的专栏
04-04 469
form input { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; border: 1px solid rgba(255, 255, 255, 0.4); background-col...
【前端】【HTML+CSS+JavaScript(JS)】简易登陆界面的实现
cc2855816075的博客
02-12 3017
效果： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录界面</title> <style type="text/css"> *{ font-family: "微软雅黑"; border: 0px solid #464646; margin-top: 15px; } #log
Html+Css+js+jquery实现简单页面的登录
03-15
Html+Css+js+jquery实现简单页面的登录
用HTML和CSS写注册登录界面
weixin_51376346的博客
10-23 9551
一.结果演示 注册界面: 登录界面： 二.主要代码展示 1.HTML部分 1.注册界面 对于注册界面，可以将其划分为三个部分，分别为左边的“新用户注册”，中间的主体部分，以及右边的“已有账号？立即登录”部分。 <div class="rg_layout"> <div class="rg_left"> <p>新用户注册</p> </div> <div class="r...
html+css+js简单的登录页面
04-10
html+css+js简单的登录页面，适用于网页设计登录页面的个性化设计。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更...
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】
06-13
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】 简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。 ...
html5+css3+js登录页面
04-10
html5+css3+js登录页面模板，适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
一个漂亮的h5登录页面，包含html,css和js
09-21
一个漂亮的h5写的登录页面可以直接使用，也可以作为门户入口使用，包含h5，css和js
登录注册页面html
06-15
基于html css jq的登录注册页面，含validate手机号码验证,简单易懂，仅供学习使用，路啦啦啦啦啦啦啦
制作一个简单HTML旅游网站（HTML+CSS+JS）无锡旅游网页设计与实现面.md
08-10
通过以上知识点的学习和实践，学生可以掌握如何使用HTML5、CSS3和JavaScript构建一个具有基础交互功能的旅游网站。这些技能不仅适用于完成学业项目，也为未来从事前端开发工作打下了坚实的基础。
通过html+css+js制作一个简单的登录页面
09-26
这是通过html+css+js制作的一个简单的登录页面。 适合想学习前端开发的小白。 可以抖音搜索“汤圆的家”，抖音号为122355808，去观看教学视频。 也可以在哔哩哔哩搜索“web-lyh”观看教学视频。
简单登录注册页面（HTML5、CSS、JS）
热门推荐
weixin_49861340的博客
03-26 1万+
使用HTML5和简单的CSS样式写一个登录注册页面，JS和CSS都在HTML5中 登录代码如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录</titl
HTML,CSS,JavaScript登录注册页面
qq_51359038的博客
08-09 893
本页面运用了HTML,CSS,JavaScript，其中，HTML,CSS用于创建表单并进行样式设计，JavaScript用于进行表单验证。 效果图如下： 登录，注册页面.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">...
用html和css实现的登录注册网页
String_N的博客
04-23 3850
跟着大神做的网页，期间遇到一些问题，也学到一些知识，现在把退幕整理总结一下，也把源码放上来。
HTML+CSS+JS编写一个较为美观的简单登录注册网页
weixin_54018699的博客
06-26 1万+
前辈们请跳过 在校大学生 学习web一个月做出来的。 CSS订制两个网页的样式和简单的小动画 Js实现注册登录的正确错误，值得一提的是，我这里设置了用户名为1234，密码为1234才可以登录跳转。没有加后端。注册的格式大家就自行查看。 HTML定义网页基本框架 经检验火狐、Microsoft Edge都可以实现 登录页面： 注册页面： 登录页面代码： // An highlighted block <!DOCTYPE html> <html lang="en" dir="ltr">
用html+css+js制作一个七张页面的网站，包含登录、注册
05-12
然后，您需要创建登录和注册页面。您可以使用 HTML 和 CSS 创建表单，使用 JavaScript 进行表单验证和提交。您可以使用服务器端技术，如 PHP 或 Node.js，来处理表单数据和用户认证。 最后，您需要将您的网站部署到...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值