一、简易版登陆注册(js实现)

登陆注册效果：

图片3.png

难点：

注册时cookie要分别存成两条；

注册页：我们注册的时候把信息分别存放到两条cookie中，一条是当前用户登陆(user)，一条存放到库中(bank)。

1、注册页面的编写：

效果：

实现的功能：

(1)点击注册的时候，把数据 (str = 姓名+密码 ) 连起来

(2)存储在 cookie 中的 user

(3)存储在cookie 中的bank ；

(4)注册完之后跳转到主页；

代码实现：

登陆页

欢迎来到17点, 请注册

姓名

密码

var strName = document.getElementById("name");

var strKey = document.getElementById("key");

var oBtn = document.getElementById("btn");

oBtn.onclick = function () {

var val = strName.value+":"+strKey.value;//把名字和密码连起来(1)

setCookie("user", val, 7);//存放到当前用户中，(2)

//先判断之前是否存在bank(3)

if(getCookie("bank")){

var bankVal = getCookie("bank")+"_"+val;

}else {

var bankVal = val;

}

//存放到库中(3)

setCookie("bank", bankVal, 100);

//跳转到首页(4)

window.location.href = "index.html";

}

2、首页的编写：

效果：未登陆状态下的首页

屏幕快照 2016-12-01 下午9.16.13.png

效果：已登陆状态下的首页

屏幕快照 2016-12-01 下午9.29.45.png

实现的功能：

(1)分别在html中写上(注册 登陆)默认显示 和(x x x的个人主页 退出登陆)默认隐藏

(2)加载页面判断是否cookie中存放登陆的用户，没有显示未登陆状态。有显示个人主页，隐藏注册登陆。

(3)动态获取用户名添加到个人主页前

(4)退出登陆的时候，删除user的这条cookie，刷新页面

代码实现：

主页

*{margin: 0; padding: 0;}

h2{float: left; margin-left: 350px; margin-bottom:50px;}

#home{ display: none; }

.top-nav{ float:right; margin-right:350px;}

主页 假装这是个LOGO

注册

登陆

的个人主页 退出登陆

var oTL = document.getElementById("text-login");

var oHome = document.getElementById("home");

var oOut = document.getElementById("outlogin");

var oLoginName = document.getElementById("login-name");

if(getCookie("user")){ //加载页面判断是否cookie中存放登陆的用户(2)

oTL.style.display = "none";

oHome.style.display = "block";

//把cookie中的名字取出来，动态添加到个人主页前(3)

var arrUser = getCookie("user").split(":");

oLoginName.innerHTML = arrUser[0];

}

// 删除user的这条cookie，刷新网页(4)

oOut.onclick = function() {

removeCookie("user");

window.location.href = "index.html";

}

3、登陆页面的编写：

效果：

屏幕快照 2016-12-01 下午9.44.01.png

实现的功能：

(1) 添加按钮点击事件，点击文本框取值并连接 ( val = 用户名+密码 )

(2)从bank的cookie中取出库的信息，并分成数组

(3)遍历这个数组，是否能匹配到文本框取的值

(4)匹配到弹出登陆成功，并刷新页面

(4)没匹配到弹出用户名密码错误

代码实现：

登陆页

欢迎来到17点, 请登录

姓名

密码

var oLname = document.getElementById("login-name");

var oLkey = document.getElementById("login-key");

var oLbtn = document.getElementById("login-btn");

//添加按钮点击事件，点击文本框取值并连接 ( val = 用户名+密码 )(1)

oLbtn.onclick = function (argument) {

var val = oLname.value+":"+oLkey.value;

if(getCookie("bank")){ //从bank的cookie中取出库的信息，并分成数组(2)

var arrBank = getCookie("bank").split("_");

var boo = false;

for( var i = 0; i < arrBank.length ; i++ ){//遍历这个数组，是否能匹配到文本框取的值(3)

if(val == arrBank[i]){

boo = true;

}

}

if ( boo == true) {

setCookie("user", val);//匹配到弹出登陆成功，并刷新页面(4)

alert("登陆成功");

window.location.href = "index.html";

}else {

alert("用户名密码错误");//(4)没匹配到弹出用户名密码错误

}

}

}

4、简易版存在的问题

(1)注册登陆时没有正则验证；

(2)注册时注册信息只有两项

(3)注册时没有验证之前是否注册过

(4)没有七天免登录选项

(5) 换一个cookie函数

二、基本版登陆注册(js实现)

首先重新封装了一个cookie的函数，编码存储；

1、注册页面的编写：

效果：

屏幕快照 2016-12-02 上午1.37.56.png

增加的功能：

(1)加入正则验证；

(2)信息已键值对形式存储；

代码实现：

登陆页

欢迎来到17点, 请注册

手机号

姓名

密码

再次输入密码

去登录

var oTel = document.getElementById("tel");

var oName = document.getElementById("name");

var oKey = document.getElementById("key");

var oKey2 = document.getElementById("key2");

var oBtn = document.getElementById("btn");

var oTelwarn = document.getElementById("tel-warn");

var oNamewarn = document.getElementById("name-warn");

var oKeywarn = document.getElementById("key-warn");

var oKeywarn2 = document.getElementById("key2-warn");

//设置正则(1)

var reg = /^1[34578]\d{9}$/ //11位手机号

var reg1 = /^[a-zA-Z0-9_\u4e00-\u9fa5]{3,10}$/ //字母数字中文下划线

var reg2 = /^\w{6,12}$/ // 字母数字下划线

//设置失焦事件

oTel.onblur = function() {

//利用正则去判断输入内容是否符合要求

if (reg.test(oTel.value)) {

oTelwarn.innerHTML = "√";

oTelwarn.style.color = "green"

} else {

oTelwarn.innerHTML = "X请输入11位手机号";

oTel.value = "";

oTelwarn.style.color = "red"

}

}

oName.onblur = function() {

if (reg1.test(oName.value)) {

oNamewarn.innerHTML = "√";

oNamewarn.style.color = "green"

} else {

oNamewarn.innerHTML = "X请输入3-10位字母数字中文下划线";

oNamewarn.value = "";

oNamewarn.style.color = "red"

}

}

oKey.onblur = function() {

if (reg2.test(oKey.value)) {

oKeywarn.innerHTML = "√";

oKeywarn.style.color = "green"

} else {

oKeywarn.innerHTML = "X请输入6-12位字母数字下划线";

oKeywarn.value = "";

oKeywarn.style.color = "red"

}

}

oKey2.onblur = function() {

if (oKey2.value==oKey.value) {

oKeywarn2.innerHTML = "√";

oKeywarn2.style.color = "green"

} else {

oKeywarn2.innerHTML = "X两次输入的密码不同";

oKeywarn2.value = "";

oKeywarn2.style.color = "red"

}

}

oBtn.onclick = function() {

//把信息拼成一个键值对形式 例如 name:17dian,key:123456,tel:18810701077(2)

var val = "name"+":"+oName.value + ","+"key" +":"+oKey.value+","+"tel"+":"+oTel.value;

createCookie("user", val); //存放到当前用户中，

if (getCookie("bank")) {

var bankVal = getCookie("bank") + "&" + val;

} else {

var bankVal = val;

}

createCookie("bank", bankVal, 100);

window.location.href = "index.html";

}

2、首页的编写：

效果：

屏幕快照 2016-12-01 下午9.29.45.png

增加功能：

(1)封装了一个将字符串转化成对象的函数；

(2)将user 的cookie转化成一个对象

(3)通过对象.属性的方法获取用户名

代码实现：

主页

*{margin: 0; padding: 0;}

h2{float: left; margin-left: 350px; margin-bottom:50px;}

#home{ display: none; }

.top-nav{ float:right; margin-right:350px;}

主页 假装这是个LOGO

注册

登陆

的个人主页 退出登陆

var oTL = document.getElementById("text-login");

var oHome = document.getElementById("home");

var oOut = document.getElementById("outlogin");

var oLoginName = document.getElementById("login-name");

if(getCookie("user")){

oTL.style.display = "none";

oHome.style.display = "block";

var obj = convertCartStrToObj(getCookie("user")); //*重点：将字符串转化成对象的形式(2)

oLoginName.innerHTML = obj.name; //通过对象.属性的方式去获取用户名(3)

}

oOut.onclick = function() {

removeCookie("user");

window.location.href = "index.html";

}

//*******重点：封装一个将字符串转化成对象的函数(1)

function convertCartStrToObj(cartStr){

var obj ={};

//将字符串name:17dian,key:123456,tel:18810701077 按“,”拆分成数组["name:17dian", "key:123456", "tel:18810701077"]

var arrVal = cartStr.split(",");

for ( var i = 0; i < arrVal.length ;i++){

data = arrVal[i].split(":"); // 在将每一项拆分 例如arrVal[0]时 data =["name", "17dian"]

console.log(data)

obj[data[0]] = data[1]; //给对象添加属性

}

return obj;

}

3、登陆页面的编写：

效果：

屏幕快照 2016-12-02 上午3.12.22.png

增加功能：

(1)把正则判断的函数封装起来

(2)增加失焦事件，用正则去判断

(3)点击登陆时，增加正则去判断

(3)通过对象.属性的方法获取手机号，并与文本框输入对比

(4)通过对象.属性的方法获取密码，并与文本框输入对比

(5)增加7天免登录功能

代码实现：

登陆页

欢迎来到17点, 请登录

手机号

密码

七天免登录

var oTel = document.getElementById("login-tel");

var oKey = document.getElementById("login-key");

var oLbtn = document.getElementById("login-btn");

var oTelwarn = document.getElementById("tel-warn");

var oKeywarn = document.getElementById("key-warn");

var oAutologin = document.getElementById("auto-login");

var reg = /^1[34578]\d{9}$/ //11位手机号

var reg2 = /^\w{6,12}$/ // 字母数字下划线

//增加失焦事件，用正则去判断(2)

oTel.onblur = fnTel; //正则判断

oKey.onblur = fnKey; //正则判断

oLbtn.onclick = function() {

//点击登陆时，增加正则去判断(3)

if (!(fnTel()&fnKey())) {

return;

}

//去判断这两个和库中是否相同 oTel.value oKey.value;

if (getCookie("bank")) {

var arrBank = getCookie("bank").split("&");

var boo = false;

for (var i = 0; i < arrBank.length; i++) {

var obj = convertCartStrToObj(arrBank[i]);

if (oTel.value == obj.tel) {//通过对象.属性的方法获取手机号，并与文本框输入对比(3)

if(oKey.value == obj.key){ //通过对象.属性的方法获取密码，并与文本框输入对比(4)

alert("登陆成功")

if (oAutologin.checked == true) {//增加7天免登录功能(5)

var iDay = 7;

}else{

var iDay ="0";

}

createCookie("user", arrBank[i] , setCookieDate(iDay) );

window.location.href = "index.html";

return;

}else{

alert("密码错误")

oKey.innerHTMl = "";

return;

}

var boo = true;

}

}

alert("这个用户不存在");

}

}

//把正则判断的函数封装起来(1)

function fnTel() {

if (reg.test(oTel.value)) {

oTelwarn.innerHTML = "";

oTelwarn.style.color = "green"

return true;

} else {

oTelwarn.innerHTML = "X请输入11位手机号";

oTel.value = "";

oTelwarn.style.color = "red"

}

}

function fnKey() {

if (reg2.test(oKey.value)) {

oKeywarn.innerHTML = "";

oKeywarn.style.color = "green";

return true;

} else {

oKeywarn.innerHTML = "X请输入6-12位字母数字下划线";

oKeywarn.value = "";

oKeywarn.style.color = "red"

}

}

//前面封装好的函数拷过来

function convertCartStrToObj(cartStr) {

var obj = {};

//将字符串name:17dian,key:123456,tel:18810701077 按“,”拆分成数组["name:17dian", "key:123456", "tel:18810701077"]

var arrVal = cartStr.split(",");

for (var i = 0; i < arrVal.length; i++) {

data = arrVal[i].split(":"); // 在将每一项拆分 例如arrVal[0]时 data =["name", "17dian"]

console.log(data)

obj[data[0]] = data[1]; //给对象添加属性

}

return obj;

}

4、再次优化注册页

修改内容：

(1)封装正在判断函数

(2)点击注册时再次进行正则判断

(3)判断手机号之前是否被注册过

(4)判断用户名之前是否被注册过

代码实现：

登陆页

欢迎来到17点, 请注册

手机号

姓名

密码

再次输入密码

去登录

var oTel = document.getElementById("tel");

var oName = document.getElementById("name");

var oKey = document.getElementById("key");

var oKey2 = document.getElementById("key2");

var oBtn = document.getElementById("btn");

var oTelwarn = document.getElementById("tel-warn");

var oNamewarn = document.getElementById("name-warn");

var oKeywarn = document.getElementById("key-warn");

var oKeywarn2 = document.getElementById("key2-warn");

var reg = /^1[34578]\d{9}$/ //11位手机号

var reg1 = /^[a-zA-Z0-9_\u4e00-\u9fa5]{3,10}$/ //字母数字中文下划线

var reg2 = /^\w{6,12}$/ // 字母数字下划线

//设置失焦事件

oTel.onblur = fnTel;

oName.onblur = fnName;

oKey.onblur = fnKey;

oKey2.onblur = fnKey2;

oBtn.onclick = function() {

//点击注册时再次进行正则判断(2)

if (!(fnTel()&fnName()&fnKey()&fnKey2())){

return;

}

//把信息拼成一个键值对形式 例如 name:17dian,key:123456,tel:18810701077(2)

var val = "name" + ":" + oName.value + "," + "key" + ":" + oKey.value + "," + "tel" + ":" + oTel.value;

createCookie("user", val); //存放到当前用户中，

if (getCookie("bank")) {

var bankVal = getCookie("bank") + "&" + val;

} else {

var bankVal = val;

}

createCookie("bank", bankVal , setCookieDate(100));

window.location.href = "index.html";

}

//封装正在判断函数(1)

function fnTel() {

//判断手机号之前是否被注册过(3)

if (getCookie("bank")) {

var arrBank = getCookie("bank").split("&");

for (var i = 0; i < arrBank.length; i++) {

var obj = convertCartStrToObj(arrBank[i]);

if (oTel.value == obj.tel) {

oTelwarn.innerHTML = "您的手机号已经被注册";

oTel.value = "";

oTelwarn.style.color = "red"

return;

}

}

}

if (reg.test(oTel.value)) {

oTelwarn.innerHTML = "√";

oTelwarn.style.color = "green";

return true;

} else {

oTelwarn.innerHTML = "X请输入11位手机号";

oTel.value = "";

oTelwarn.style.color = "red"

}

}

function fnName() {

//判断用户名之前是否被注册过(4)

if (getCookie("bank")) {

var arrBank = getCookie("bank").split("&");

for (var i = 0; i < arrBank.length; i++) {

var obj = convertCartStrToObj(arrBank[i]);

if (oName.value == obj.name) {

oNamewarn.innerHTML = "此用户名已经被注册";

oName.value = "";

oNamewarn.style.color = "red";

return;

}

}

}

if (reg1.test(oName.value)) {

oNamewarn.innerHTML = "√";

oNamewarn.style.color = "green"

return true;

} else {

oNamewarn.innerHTML = "X请输入3-10位字母数字中文下划线";

oName.value = "";

oNamewarn.style.color = "red"

}

}

function fnKey() {

if (reg2.test(oKey.value)) {

oKeywarn.innerHTML = "√";

oKeywarn.style.color = "green"

return true;

} else {

oKeywarn.innerHTML = "X请输入6-12位字母数字下划线";

oKeywarn.value = "";

oKeywarn.style.color = "red"

}

}

function fnKey2() {

if (oKey2.value == oKey.value) {

oKeywarn2.innerHTML = "√";

oKeywarn2.style.color = "green"

return true;

} else {

oKeywarn2.innerHTML = "X两次输入的密码不同";

oKeywarn2.value = "";

oKeywarn2.style.color = "red"

}

}

function convertCartStrToObj(cartStr) {

var obj = {};

//将字符串name:17dian,key:123456,tel:18810701077 按“,”拆分成数组["name:17dian", "key:123456", "tel:18810701077"]

var arrVal = cartStr.split(",");

for (var i = 0; i < arrVal.length; i++) {

data = arrVal[i].split(":"); // 在将每一项拆分 例如arrVal[0]时 data =["name", "17dian"]

obj[data[0]] = data[1]; //给对象添加属性

}

return obj;

}

总结：

经过这样就一个思路就完成了，登陆注册页面的编写。如果熟练，前面简易版可直接省略，从最后完成的效果去编写；

html利用cookie登陆,前端登陆注册实现——利用cookie模仿后台数据库存取数据相关推荐

  1. 前端angular与服务器端nodejs实现从mysql数据库读取数据实现前后端交互实例

    一.angular前端交互 使用angular框架的人都知道angular提供了内置的HttpClientModule模块来实现前后端交互请求. 实际操作如下: 1.在app.module.ts文件中 ...

  2. 爬虫第三弹——利用EditThisCookie获取cookie跳过登陆验证（医脉通）

    爬虫第一弹:利用Scrapy爬取1905电影网 爬虫第二弹:深网爬虫指南,AcFun评论爬取教程 前言 最近有个活,需要将约300个英文医学名词翻译成中文. 经过一番查找发现医脉通的词典还不错,但是必 ...

  3. 前端登陆之cookie篇

    一.cookie 上一个文章介绍了实用node写了一个服务,以及调用api去操作数据库的一个前后端分离的demo,这次重点记录一下前后端登陆操作的一个部分.登陆认证是一个项目中比较重要的部分,接下来我 ...

  4. python-flack(一)登陆页面、注册页面、主页页面、登陆用户信息页面、上传文件页面

    文章目录 1.flask项目静态文件的导入 2.flask链接的导入 3.消息闪现 1. 如何实现闪现? 2. html代码中如何调用闪现内容? 4.Flask中集成bootstrap 1. 什么是B ...

  5. php实现cookie自动登录,PHP使用Cookie实现自动登陆

    大部分 Web 系统软件都会有登录和退出模块,这是为了维护系统的安全性,确保只有通过身份验证的用户才能访问该系统.而本节我们要介绍的自动登录,就是在用户第一次成功登录某个网站后的一段时间内,再次登录这 ...

  6. 关于模拟登陆的小结-抓包、cookie、session和token

    概述 上个星期根据bcloud写了个Java版本的登陆项目.其实本来时想做个Linux的百度云登陆软件,但是做到获取bdstoken的时候出了问题解决不了.后来我把bcloud项目下了下来用发现也有问 ...

  7. 日常小结-关于模拟登陆的小结-抓包、cookie、session和token

    概述 上个星期根据bcloud写了个java版本的登陆项目.其实本来时想做个linux的百度云登陆软件,但是做到获取bdstoken的时候出了问题解决不了.后来我把bcloud项目下了下来用发现也有问 ...

  8. JavaEE使用servlet、cookie实现用户登陆和数据保存

    文章目录 一.项目分析 二.项目功能(只实现了记住密码功能!其他的学会了再补上!) 三.制作界面 四.项目实现结果(只实现了记住密码功能!!其他的等我学到了那部分再去补上!!) 一.项目分析 根据要求 ...

  9. PHP中Cookie的使用---添加/更新/删除/获取Cookie 及 自动填写该用户的用户名和密码和判断是否第一次登陆...

    PHP中Cookie的使用---添加/更新/删除/获取Cookie 及 自动填写该用户的用户名和密码和判断是否第一次登陆  什么是cookie 服务器在客户端保存用户的信息,比如登录名,密码等 这些数 ...

  10. 14.cookie与自动登陆

    场景 webdriver可以读取并添加cookie.有时候我们需要验证浏览器中是否存在某个cookie,因为基于真实的cookie的测试是无法通过白盒和集成测试完成的. 另外更加常见的一个场景是自动登 ...

最新文章

  1. 一文快速入门分库分表中间件 Sharding-JDBC
  2. 如何看待和评价浙江大学18级硕士研究生齐俏两年发14篇论文，获浙大最高层次奖学金?...
  3. AppleWatch开发教程之Watch应用对象新增内容介绍以及编写运行代码
  4. springcloud 微服务 分布式 Activiti6 工作流 vue.js html 跨域 前后分离
  5. Mac查看Android动态库依赖
  6. 怎样利用超图客户端打点_QuickFix Java 讲解（三）客户端的搭建与解析
  7. SAP UI5 OData谣言粉碎机：极短时间内发送两个Odata request,前一个会自动被cancel掉吗
  8. Android ndk之Check that/ndk/openssl/crypto/libsfk.so exists or that its path is corret
  9. 如何把Win11任务栏变窄
  10. 最全攻略：数据分析师必备Python编程基础知识
  11. 阿里云+wordpress搭建个人网站及博客
  12. 滴滴顺风车再调整服务时间：男女用户一视同仁
  13. linux命令 三大利器,awk、grep、sed是linux操作文本的三大利器，也是必须掌握的linux命令之一...
  14. 一个简易版的T4代码生成框架
  15. 谈谈我对数据结构的理解
  16. 51单片机汇编学习笔记1——内部结构
  17. OPENGL回归原点
  18. 血氧仪方案功能及使用方法介绍
  19. clCreateBuffer的7种方式的异同、MapBuffer与clCreateBuffer某些方式的区别与联系
  20. NEWPLAN-博客目录

热门文章

  1. 拓端tecdat|R语言t检验和非正态性的鲁棒性
  2. （13）机器学习_LogisticRegression
  3. python中dtype与dtypes区别
  4. 软件工程 第二章 可行性研究
  5. DeepFake技术--DeepFakes 概述（一）（二）
  6. ubuntu下caffe的FCN8模型训练
  7. python+grpc+yolo 目标检测实践
  8. Python获取日期列表中每一天中最大的时刻对应的日期时间戳
  9. C++ const修饰指针变量的位置不同代表的意义
  10. opencv 头文件 包含 include 的问题