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

淩亂°似流年 2021-12-21 09:59 269阅读 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 条评论，269人围观）

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

相关阅读

相关 Java-web实现用户登录、注册功能

> 源码在资源里目录环境搭建数据库用户登录需求分析代码实现编写UserMapper类

我会带着你远行/ 2024年03月30日 10:06/ 0 赞/ 74 阅读

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

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

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

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

1、系统目录结构 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

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

相关 sprongboot mysql登录注册_后端开发：SpringBoot实现注册与登录功能

一、数据库设计根据一般登录与注册的需求，数据库的用户表结构如下： ![1203cd30e214a42513878ffdfe731dc1.png][] 二、服务端API接

女爷i/ 2022年11月05日 15:56/ 0 赞/ 254 阅读

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

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

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

相关实现登录、注册

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

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

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

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

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

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

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

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

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

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

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

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

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

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