登录注册功能的实现详解（多用户名注册、案例补充）

淩亂°似流年 2021-12-21 09:59 201阅读 0赞

## 登录注册功能的实现详解（多用户名注册、案例补充） ##

**案例功能说明**  
1、可以保存多个注册用户  
2、注册时判断用户名是否存在，不存在可注册  
3、注册成功后，跳转到登录页面  
4、取出cookie里面的值，进行判断，若用户输入的用户名和密码匹配成功则成功登录

//登录界面

<body>
    		用户名 ： <input type="text" id="uname" /><br>
    		密　码 ： <input type="text" id="upwd" /><br>
    		<input type="button" value="注册" id="reg"/>
    	</body>

//

<script src="jquery.min.js"></script>
        <script src="jquery.cookie.js"></script>
        <script>
        	$("#reg").click(function(){
        		var info = [];   //用于存放多个用户的注册信息
        		//获取用户名
        		var uname = $("#uname").val();
        		//获取密码
        		var upwd = $("#upwd").val();
        		var flag = true;
        		//将每一个用户信息作为一个对象
        		var $new = {
        				"uname" : uname,
        				"upwd" : upwd
        		}
        		if( $.cookie(userinfo)){ //判读cookie里面是否有值，并取出来转化为对象
        			info = JSON.parse($.cookie(" userinfo"))
        		}
        		for( var i in info){//遍历所有对象
        			if( info[i].uname == uname){  //遍历所有对象中的用户名进行判断
        				alert("用户名已注册")
        				flag = false；
        				break；
        			}
        		}
        		if(flag){
        			info.push($new);//将对象存入数组当中
        			$.cookie( "userinfo", JSON.stringify(info),{expires :7})//将数据以字符串的形式存入到cookie中，并设置7天的生存期；
        			alert（“”注册成功”）；
        			//跳转到登录界面
        			location.href = "login.html";
        		}
        	})
        </script>

//注册界面，输出cookie里面的数据  
![控制台输出cookie里面的值][cookie]

//登录界面

<body>
    		用户名 ： <input type="text" id="uname" /><br>
    		密　码 ： <input type="text" id="upwd" /><br>
    		<input type="button" value="登录" id="login"/>
    </body>

//

$(function(){
    	$("#login").click(function(){
    		var username = $("#uname").val();
    		var userpwd = $("#upwd").val();
    		var user =JSON.parse( $.cookie("userinfo") );
    		for( var i in user ){
    			if(user[i].uname == username){
    				if(user[i].upwd == userpwd){
    					alert("登录成功")
    				}else{
    					alert("密码错误")
    				}
    			}else{
    				alert("用户名不存在")
    			}
    		}
    	})
    })

[cookie]: /images/20211221/08fb8244c01e4334aa21d98906c81751.png

发表评论取消回复

表情：

评论列表（有 0 条评论，201人围观）

还没有评论，来说两句吧...

相关阅读

相关【Java案例】用户登录注册

案例介绍：编写程序实现简单的用户登录注册功能。程序包含以下4个功能：（1）登录功能，用户输入正确的账号密码登录成功；（2）注册功能，输入用户名和密码进行注册；（

迷南。/ 2024年03月30日 16:18/ 0 赞/ 11 阅读

相关 JavaWeb：用户注册登录案例

1.1 用户登录 1.1.1 需求分析 ![在这里插入图片描述][111eeb6d28c340078dfa90c9b6a53956.png_pic_center]

冷不防/ 2024年03月30日 13:39/ 0 赞/ 10 阅读

相关 NodeJS实现登录注册功能（图文）

该Demo根据菜鸟教程的练手项目，请提前到菜鸟教程的官网查看[nodejs][]的相关教程，根据教程实际操作一遍，然后自己动手去实现登录、注册功能，此Demo只作参考，不符合前

深藏阁楼爱情的钟/ 2023年08月17日 15:42/ 0 赞/ 74 阅读

相关 SpringBoot学习之实现登录注册功能

1、系统目录结构 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

偏执的太偏执、/ 2022年12月12日 04:50/ 0 赞/ 169 阅读

相关网站注册登录注销功能实现

回到学校已经有三个星期了，那也有三个星期没有去写博客了，今天就对之前学习的内容进行一个小的项目回顾一下吧。今天要实现的项目是某网站里面的注册登录注销三个功能。开发环

曾经终败给现在/ 2022年09月30日 00:56/ 0 赞/ 259 阅读

相关实现登录、注册

登录原理：如果persons中含有对应的用户名和密码则提示登录成功，否则提示用户名和密码错误 1. 用

秒速五厘米/ 2022年09月11日 13:14/ 0 赞/ 189 阅读

相关 PHP 实现用户注册登录功能

前端页面制作一、介绍 1.1 基础内容本次实验主要以前端制作为主要内容，使用纯前端知识制作用户注册登录的界面，为后续实验做铺垫。通过本实验的学习，我们可以

绝地灬酷狼/ 2022年04月06日 07:22/ 0 赞/ 977 阅读

相关 PHP实现用户登录注册功能

初学php做了一些比较常见且有用的页面，放在上面记录一下咯我是用了bootstrap框架里面的模态框做注册登陆页面，这样页面比较美观页面效果： ![image.

一时失言乱红尘/ 2022年01月26日 06:41/ 0 赞/ 349 阅读

相关登录注册功能的实现详解（多用户名注册、案例补充）

登录注册功能的实现详解（多用户名注册、案例补充）案例功能说明 1、可以保存多个注册用户 2、注册时判断用户名是否存在，不存在可注册 3、注册成功后，跳转到登

淩亂°似流年/ 2021年12月21日 09:59/ 0 赞/ 202 阅读

相关 Jsp/Servlet中实现登录注册功能

目录 index.jsp: login.jsp: register.jsp: personCenter.jsp: User.java: DBUtil.java:

朱雀/ 2021年09月19日 00:24/ 0 赞/ 429 阅读