登录和注册功能（JS）

Author Avatar
Euan 11月 04, 2019
  • 在其它设备中阅读本文章

实验目的

•掌握HTML5、CSS3和JavaScript的使用
•能够使用JavaScript在Web前端实现简单的用户互动（登录、注册、验证码等）

实验环境

•Chrome
•vscode

实验内容

  1. 根据课堂内容，对JavaScript脚本语言中的内容进行掌握（见“第3章JavaScript脚本语言.pdf”中的内容）
  2. 根据附件中的欧莱雅网站首页（index.html），完善“登录”（login.html）和“注册”（register.html）页面的功能。

要求

（1）登录（login.html）和注册（register.html）页面是采用HTML+CSS进行实现的，可参考图1。
（2）设计一个登录页面（login.html）：包含“输入用户名”、“密码”，并添加一个“验证码生成框”和“登录按钮”；输入用户名和密码后，如果能够已给定的用户名和密码匹配（用户名:zyh，密码：1759116），并且验证码输入正确，则弹出登录成功的对话框并跳转到index.html页面，否则弹出错误框提示是哪部分输入的内容不正确。如用户名和密码错误则弹出“用户名或密码错误，请重新输入！”，并返回登录页面；验证码输入错误提示“验证码输入错误！”，验证码未输入提示错误提示“请输入验证码！”，并返回登录页面。
（3）设计一个注册页面（register.html）：包含“请输入用户名”、“请输入密码”、“请再次输入密码”，并添加一个“验证码生成框”和“注册按钮”；点击注册按钮后，先检查用户名框、密码框、验证码框是否为空，如果为空则弹出对话框提示“很抱歉，用户名不能为空!”、“很抱歉，密码不能为空!”、“请输入验证码！”，并将输入光标聚焦到相应的输入框中；再判断输入的用户名是否与已有的用户名重复（“zyh”），如重复返回“很抱歉，该用户名已注册，请更换注册用户名!”，并将输入光标聚焦到“请输入用户名”的输入框中；再判断两次用户密码输入是否一致，如果不一致，弹出对话框提示“输入的密码不一致，请重新输入！”，并删除密码框中的内容，将输入光标聚焦到“请输入密码”的输入框中；验证码输入错误提示“验证码输入错误！”。全部输入正确，则弹出对话框提示“恭喜注册成功！”，其中“”中是新注册的用户名，并跳转到index.html页面。

（下面给出相应代码和实现的截图）

登录

源代码

login.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
  <title>登录页面</title>
  <link rel="stylesheet" type="text/css" href=".\css\style.css" />
  <script type="text/javascript" src=".\js\myscript.js"></script>
</head>
<body>
  <div  class="login1">
    <span class="login1_1">用户登录</span>
  </div>
  <div class="login2">
    <span class="login2_1">用户名：</span>
	<input type="text" name="username" id="usr" class="usr_name">
  </div>
  
  <div class="login3">
    <span class="login3_1">密&nbsp;码：</span>
	<input type="password" name="password" id="pwd" class="pass_word">
  </div>
  
  <div class="login4">
    <span class="login4_1">验证码：</span>
	<input type="text" id="input1" class="input_code">
    <input type="button" id="checkCode" class="codeJS" value="生成验证码" onclick="createCode()"/>
  </div>
  
  <div class="login5">
    <input type="button" id="sumbitButton" value="登录" onclick="loginValidate()"/>
  </div>
</body>
</html>

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
*{ font-size:12px; font-family:"宋体"; color:black;margin:0 auto;}

body{ margin:0; background-color:#DCDCDC;}
input{ border:none;}

.login1 {
	background-image:url(../images/sky.jpg);
	width:400px;
	height:120px;
	overflow:hidden;
	text-align:center;
	line-height: 120px;
	letter-spacing:10px;
	margin-bottom:2px;
}

.login1_1 {
	font-size:60px;
	font-weight:bold;
	color:#FFA500;
}

.login2 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	margin-bottom:1px;
}

.login2_1 {
	font-size:20px;
	font-weight:bold;
	color:black;
}

.usr_name {
	padding-top:6px;
	height:20px;
	width:150px;
}

.login3 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	margin-bottom:1px;
}

.login3_1 {
	font-size:20px;
	font-weight:bold;
	color:black;
}

.pass_word {
	padding-top:6px;
	height:20px;
	width:150px;
}

.login4 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	//letter-spacing:10px;
	margin-bottom:1px;
}

.login4_1 {
	font-size:20px;
	font-weight:bold;
	color:black;
}

.input_code {
	padding-top:3px;
	height:20px;
	width:70px;
}

.codeJS {
	background-color:#E6E6FA;
	padding-top:3px;
	height:24px;
	width:70px;
	font-style:italic;
	font-size:12px;
	font-weight:bold;
	color:#D2691E;
}

.login5 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	letter-spacing:10px;
}

.login5 input {
	background-color:#6495ED;
	font-size:18px;
	padding-left:16px;
	letter-spacing:10px;
	font-weight:bold;
	color:red;
}

myscript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
var code;

function createCode() {
	var codeLength = 4;
	var checkCode = document.getElementById("checkCode");
	var selectChar = new Array(2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
	var charIndex = Math.floor(Math.random() * 32);
	code = selectChar[charIndex];
	for (var i = 1; i < codeLength; i++) {
		var charIndex = Math.floor(Math.random() * 32);
		code += selectChar[charIndex];
	}
	if (code.length != codeLength) {
		createCode();
	}
	document.getElementById("checkCode").value = code;
}

function loginValidate() {
	var inputCode = document.getElementById("input1").value.toUpperCase();
	var usrName = document.getElementById("usr").value;
	var passWD = document.getElementById("pwd").value;
	var passWD = document.getElementById("pwd").value;
	if (usrName.length <= 0) {
    alert("很抱歉，用户名不能为空!");
    document.getElementById("usr").focus();
    createCode();
    return false;
  }
  if (passWD.length <= 0) {
    alert("很抱歉，密码不能为空!");
    document.getElementById("pwd").focus();
    createCode();
    return false;
	}
	if (inputCode.length <= 0) {
		alert("请输入验证码！");
		createCode();
		document.getElementById("input").focus();
		return false;
	} else if (inputCode != code) {
		alert("验证码输入错误！");
		createCode();
		document.getElementById("input1").value="";
		document.getElementById("input1").focus();
		return false;
	} else {
		if ( (usrName == "zyh") && (passWD == "1759116")) {
			alert("登录成功！");
			jump("index.html");
			return true;
		}
		else {
			alert("用户名或密码错误，请重新输入！");
			jump("login.html");
			return false;
		}
	}
}


function jump(address) {
	if (address == null)
		window.location.href="http://www.sina.com.cn";
	else
		window.location.href=address;
}

截图

u4HaJf.jpg

图一 登录界面

u4Hyes.jpg
u4HdW8.jpg
u4HDyQ.jpg

图二 用户名/密码/验证码为空并清除文本框内容和定位光标到文本框并刷新二维码

u4HrLj.jpg
u4H0SS.jpg

图三 用户名/密码/验证码错误并清除文本框内容和定位光标到文本框并刷新二维码

u4HBQg.jpg

图四 登录成功并刷新该页面

注冊

源代码

register.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
  <title>注册页面</title>
  <link rel="stylesheet" type="text/css" href=".\css\style1.css" />
  <script type="text/javascript" src=".\js\myscript1.js"></script>
</head>
<body>
  <div  class="login1">
    <span class="login1_1">用户注册</span>
  </div>
  <div class="login2">
    <span class="login2_1">&nbsp;请输入用户名：</span>
	<input type="text" name="username" id="usr" class="usr_name">
  </div>
  
  <div class="login3">
    <span class="login3_1">&nbsp;&nbsp;请输入密码：</span>
	<input type="password" name="password" id="pwd" class="pass_word">
  </div>

  <div class="login6">
    <span class="login6_1">请再次输入密码：</span>
	<input type="password" name="assertpassword" id="assertpwd" class="pass_word">
  </div>
  
  <div class="login4">
    <span class="login4_1">&nbsp;&nbsp;&nbsp;&nbsp;验证码：</span>
	<input type="text" id="input1" class="input_code">
    <input type="button" id="checkCode" class="codeJS" value="生成验证码" onclick="createCode()"/>
  </div>
  
  <div class="login5">
    <input type="button" id="registerButton" value="注册" onclick="registerValidate()"/>
  </div>
</body>
</html>

style1.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
*{ font-size:12px; font-family:"宋体"; color:black;margin:0 auto;}

body{ margin:0; background-color:#DCDCDC;}
input{ border:none;}

.login1 {
	background-image:url(../images/sky.jpg);
	width:400px;
	height:120px;
	overflow:hidden;
	text-align:center;
	line-height: 120px;
	letter-spacing:10px;
	margin-bottom:2px;
}

.login1_1 {
	font-size:60px;
	font-weight:bold;
	color:#FFA500;
}

.login2 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	margin-bottom:1px;
}

.login2_1 {
	font-size:20px;
	font-weight:bold;
	color:black;
}

.usr_name {
	padding-top:6px;
	height:20px;
	width:150px;
}

.login3 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	margin-bottom:1px;
}

.login3_1 {
	font-size:20px;
	font-weight:bold;
	color:black;
}

.pass_word {
	padding-top:6px;
	height:20px;
	width:150px;
}

.login6 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	margin-bottom:1px;
}

.login6_1 {
	font-size:20px;
	font-weight:bold;
	color:black;
}

.pass_word {
	padding-top:6px;
	height:20px;
	width:150px;
}

.login4 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	//letter-spacing:10px;
	margin-bottom:1px;
}

.login4_1 {
	font-size:20px;
	font-weight:bold;
	color:black;
}

.input_code {
	padding-top:3px;
	height:20px;
	width:70px;
}

.codeJS {
	background-color:#E6E6FA;
	padding-top:3px;
	height:24px;
	width:70px;
	font-style:italic;
	font-size:12px;
	font-weight:bold;
	color:#D2691E;
}

.login5 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	letter-spacing:10px;
}

.login5 input {
	background-color:#6495ED;
	font-size:18px;
	padding-left:16px;
	letter-spacing:10px;
	font-weight:bold;
	color:red;
}

myscript1.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
var code;

function createCode() {
	var codeLength = 4;
	var checkCode = document.getElementById("checkCode");
	var selectChar = new Array(2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
	var charIndex = Math.floor(Math.random() * 32);
	code = selectChar[charIndex];
	for (var i = 1; i < codeLength; i++) {
		var charIndex = Math.floor(Math.random() * 32);
		code += selectChar[charIndex];
	}
	if (code.length != codeLength) {
		createCode();
	}
	document.getElementById("checkCode").value = code;
}

function registerValidate() {
	var inputCode = document.getElementById("input1").value.toUpperCase();
	var usrName = document.getElementById("usr").value;
  var passWD = document.getElementById("pwd").value;
  var assertpassWD = document.getElementById("assertpwd").value;
	if (usrName.length <= 0) {
    alert("很抱歉，用户名不能为空!");
    document.getElementById("usr").focus();
    createCode();
    return false;
  }
  if (passWD.length <= 0) {
    alert("很抱歉，密码不能为空!");
    document.getElementById("pwd").focus();
    createCode();
    return false;
  }

  if (assertpassWD.length <= 0) {
    alert("很抱歉，确认密码不能为空!");
    document.getElementById("assertpwd").focus();
    createCode();
    return false;
  }
  
  if (inputCode.length <= 0) {
    alert("请输入验证码！");
    createCode();
    document.getElementById("input1").focus();
    return false;
  } else if (inputCode != code) {
    alert("验证码输入错误！");
    createCode();
    document.getElementById("input1").value="";
    document.getElementById("input1").focus();
    return false;
  } else {
  if (usrName == "zyh") {
    alert("很抱歉，该用户名已注册，请更换注册用户名!");
    document.getElementById("usr").value="";
    document.getElementById("usr").focus();
    createCode();
    return false;
  }
  else {

    if( passWD == assertpassWD) {
      alert("注册成功！");
      jump("index.html");
      return true;
    }

    else {
      alert("输入的密码不一致，请重新输入！");
      document.getElementById("assertpwd").value="";
      document.getElementById("assertpwd").focus();
      createCode();
      return false;
    }
    } 
  }
}

function jump(address) {
	if (address == null)
		window.location.href="http://www.sina.com.cn";
	else
		window.location.href=address;
}

截图

u5Pxe0.jpg

图一 登录界面

u5PXyn.jpg
u5Poo8.jpg
u5P7FS.jpg

图二 用户名/密码/确认密码/验证码为空并清除文本框内容和定位光标到文本框并刷新二维码

u5PjLq.jpg
u5Pqzj.jpg
u5PHJg.jpg

图三 用户名已重复/密码不一致/验证码错误并清除文本框内容和定位光标到文本框并刷新二维码

u5POQs.jpg

图四 注册成功并刷新该页面

实验心得

重构了一下登录的代码，使得程序更有逻辑性，比如密码验证前需要填写验证码，验证码实时多次刷新等，界面也挺丑的，不过既然做前端，ui也是前端一项很重要的技能……这点和老师的观点有点不一样，因为前端报错vue，echart，d3.js都是很好的画图工具，如果ui都不行给你工具也发挥不了。包括现在的课程，我觉得老师也没必要叫我们写这种很low的网站，放在20年前，不但有前途还有钱途。现在到处到时CMS，部署一个，改下css主题就行，已经没有任何技术含量和技术价值了。

本文使用 CC BY-NC-SA 3.0 中国大陆 协议许可
具体请参见 知识共享协议
本文链接：https://zyhang8.github.io/2019/11/04/javaweb-exp2/