一、简易版登陆注册(js实现)
登陆注册效果:
图片3.png难点:
注册时cookie要分别存成两条;
注册页:我们注册的时候把信息分别存放到两条cookie中,一条是当前用户登陆(user),一条存放到库中(bank)。
1、注册页面的编写:
效果:
实现的功能:
(1)点击注册的时候,把数据 (str = 姓名+密码 ) 连起来
(2)存储在 cookie 中的 user
(3)存储在cookie 中的bank ;
(4)注册完之后跳转到主页;
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆页</title>
<script type="text/javascript" src="cookie.js"></script>
</head>
<body>
<form>
<h2>欢迎来到17点, 请注册</h2>
<div class="field">
姓名
<input type="text" id="name" name="">
</div>
<div class="field">
密码
<input type="text" id="key" name="">
</div>
<div class="field">
<input type="button" id="btn" name="" value="注册">
</div>
</form>
</body>
</html>
<script type="text/javascript">
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";
}
</script>
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,刷新页面
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页</title>
<script type="text/javascript" src="cookie.js"></script>
</head>
<style type="text/css">
*{margin: 0; padding: 0;}
h2{float: left; margin-left: 350px; margin-bottom:50px;}
#home{ display: none; }
.top-nav{ float:right; margin-right:350px;}
</style>
<body>
<h2>主页 假装这是个LOGO</h2>
<!-- 分别在html中写上(注册 登陆)*默认显示* 和(x x x的个人主页 退出登陆)*默认隐藏*(1)-->
<div class="top-nav">
<div id="text-login">
<a href="register.html">注册</a>
<a href="login.html" id="login">登陆</a>
</div>
<div id="home"><a href="" id="login-name"></a>的个人主页 <a href="javascript:;" id="outlogin">退出登陆</a>
</div>
</div>
</body>
</html>
<script type="text/javascript">
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";
}
</script>
3、登陆页面的编写:
效果:
屏幕快照 2016-12-01 下午9.44.01.png
实现的功能:
(1) 添加按钮点击事件,点击文本框取值并连接 ( val = 用户名+密码 )
(2)从bank的cookie中取出库的信息,并分成数组
(3)遍历这个数组,是否能匹配到文本框取的值
(4)匹配到弹出登陆成功,并刷新页面
(4)没匹配到弹出用户名密码错误
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆页</title>
<script type="text/javascript" src="cookie.js"></script>
</head>
<body>
<form>
<h2>欢迎来到17点, 请登录</h2>
<div class="field">
姓名
<input type="text" id="login-name" name="">
</div>
<div class="field">
密码
<input type="text" id="login-key" name="">
</div>
<div class="field">
<input type="button" id="login-btn" name="" value="登陆">
</div>
</form>
</body>
<script type="text/javascript">
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)没匹配到弹出用户名密码错误
}
}
}
</script>
</html>
4、简易版存在的问题
(1)注册登陆时没有正则验证;
(2)注册时注册信息只有两项
(3)注册时没有验证之前是否注册过
(4)没有七天免登录选项
(5) 换一个cookie函数
二、基本版登陆注册(js实现)
首先重新封装了一个cookie的函数,编码存储;
1、注册页面的编写:
效果:
屏幕快照 2016-12-02 上午1.37.56.png
增加的功能:
(1)加入正则验证;
(2)信息已键值对形式存储;
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆页</title>
<script type="text/javascript" src="cookie.js"></script>
</head>
<body>
<form>
<h2>欢迎来到17点, 请注册</h2>
<div class="field">
手机号
<input type="text" id="tel" name="">
<span id="tel-warn"></span>
</div>
<div class="field">
姓名
<input type="text" id="name" name="">
<span id="name-warn"></span>
</div>
<div class="field">
密码
<input type="password" id="key" name=""> <!-- 密码改成密文 -->
<span id="key-warn"></span>
</div>
<div class="field">
再次输入密码
<input type="password" id="key2" name=""> <!-- 密码改成密文 -->
<span id="key2-warn"></span>
</div>
<div class="field">
<input type="button" id="btn" name="" value="注册">
<a href="login.html">去登录</a>
</div>
</form>
</body>
</html>
<script type="text/javascript">
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";
}
</script>
2、首页的编写:
效果:
屏幕快照 2016-12-01 下午9.29.45.png
增加功能:
(1)封装了一个将字符串转化成对象的函数;
(2)将user 的cookie转化成一个对象
(3)通过对象.属性的方法获取用户名
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页</title>
<script type="text/javascript" src="cookie.js"></script>
</head>
<style type="text/css">
*{margin: 0; padding: 0;}
h2{float: left; margin-left: 350px; margin-bottom:50px;}
#home{ display: none; }
.top-nav{ float:right; margin-right:350px;}
</style>
<body>
<h2>主页 假装这是个LOGO</h2>
<!-- 分别在html中写上(注册 登陆)*默认显示* 和(x x x的个人主页 退出登陆)*默认隐藏*(1)-->
<div class="top-nav">
<div id="text-login">
<a href="register.html">注册</a>
<a href="login.html" id="login">登陆</a>
</div>
<div id="home"><a href="" id="login-name"></a>的个人主页 <a href="javascript:;" id="outlogin">退出登陆</a>
</div>
</div>
</body>
</html>
<script type="text/javascript">
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;
}
</script>
3、登陆页面的编写:
效果:
屏幕快照 2016-12-02 上午3.12.22.png
增加功能:
(1)把正则判断的函数封装起来
(2)增加失焦事件,用正则去判断
(3)点击登陆时,增加正则去判断
(3)通过对象.属性的方法获取手机号,并与文本框输入对比
(4)通过对象.属性的方法获取密码,并与文本框输入对比
(5)增加7天免登录功能
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆页</title>
<script type="text/javascript" src="cookie.js"></script>
</head>
<body>
<form>
<h2>欢迎来到17点, 请登录</h2>
<div class="field">
手机号
<input type="text" id="login-tel" name="">
<span id="tel-warn"></span>
</div>
<div class="field">
密码
<input type="password" id="login-key" name="">
<span id="key-warn"></span>
</div>
<div class="field">
<input type="button" id="login-btn" name="" value="登陆">
<input type="checkbox" id="auto-login" name="" value="checked">七天免登录
</div>
</form>
</body>
<script type="text/javascript">
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;
}
</script>
</html>
4、再次优化注册页
修改内容:
(1)封装正在判断函数
(2)点击注册时再次进行正则判断
(3)判断手机号之前是否被注册过
(4)判断用户名之前是否被注册过
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆页</title>
<script type="text/javascript" src="cookie.js"></script>
</head>
<body>
<form>
<h2>欢迎来到17点, 请注册</h2>
<div class="field">
手机号
<input type="text" id="tel" name="">
<span id="tel-warn"></span>
</div>
<div class="field">
姓名
<input type="text" id="name" name="">
<span id="name-warn"></span>
</div>
<div class="field">
密码
<input type="password" id="key" name="">
<span id="key-warn"></span>
</div>
<div class="field">
再次输入密码
<input type="password" id="key2" name="">
<span id="key2-warn"></span>
</div>
<div class="field">
<input type="button" id="btn" name="" value="注册">
<a href="login.html">去登录</a>
</div>
</form>
</body>
</html>
<script type="text/javascript">
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;
}
</script>
总结:
经过这样就一个思路就完成了,登陆注册页面的编写。如果熟练,前面简易版可直接省略,从最后完成的效果去编写;
百度云链接:http://pan.baidu.com/s/1slgvrch 密码:97x2
网友评论