登录注册

实现登陆注册功能的网页

背景

  上学期加入了学校的一个实验室,给了我们一个任务是做一个实现登陆注册的网页。最开始交了一个超级简陋的上去后,被老师挑出了很多缺陷,但是一直没有去修改,最近开始学习相关知识并开始进行完善,期间看了很多网站的登陆注册界面,有了很多新的想法,开始进行实践。

构思

  放出一个我画的思维导图
在这里插入图片描述
  这里推荐一波思维导图,把思路画出来对你任务的进行真的很有帮助,软件xmind或者幕布都可以免费使用。

进度

  目前脑图中列出的还有很多只是想法,有待实现。
先把已完成的部分贴出来,以后一边完善一边改。
  未完成部分:

  • 正则表达式
  • Ajax
  • session与cookie
  • 个人中心还没有做出来

代码

  先贴已实现部分

注册

signup.html

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<link href="css/signup.css" rel="stylesheet">
	<script src="js/signup.js"></script>
</head>
<body>
	<div class='login'>
		<form id="formup" action="signup.php" method="post">
			<ul>
				<li class='clearfix'>
					<center><span class='tou'>注册</span></center>
				</li>
				<li class='clearfix'>
					<span class='fl-l'>用户名</span>
					<input class='fl-l' type="text" name='username' maxlength="20" onblur="UsernameCheck()" >
					<span class='tips' id="nametip">3-20位中文,字母,数字,下划线的组合,以中文或字母开头</span>
				</li>
				<li class='clearfix'>
					<span class='fl-l'>密码</span>
					<input class='fl-l' type="password" name='password1' maxlength="20" onblur="PasswordCheck()">
					<span class='tips' id="psw1tip">6-20位英文(区分大小写)、数字、字符的组合</span>
				</li>
				<li class='clearfix'>
					<span class='fl-l'>确认密码</span>
					<input class='fl-l' type="password" name='password2' maxlength="20" onblur="CheckAgain()">
					<span class='tips' id="psw2tip">请再输入一遍上面的密码</span>
				</li>
				<li class='clearfix'>
					<canvas id="canvas" class="fl-c" width="205" height="55" onclick="CreatCode()"></canvas>
					<input type="text" name='yanzhengma' id="inputCode" class="yzm" onblur="CheckCode()" maxlength="4" >
					<span class='tips' id="codetip">请输入验证码(不区分大小写,点击图片更换验证码)</span>
				</li>
				<li class='clearfix'>
					<input type="checkbox" id='checkbox' onclick="TermsCheck()"/>
					<a href="javascript:ShowTerms();" class="Checkbox" style="color:dodgerblue">我已阅读并同意条款</a>
					<input type="submit" id="zhuce" name='submit' value="注册" onclick="return SubmitCheck()">
					<input type="reset" id="reset" onclick="CreatCode()">
				</li>
				<li class='clearfix'>
					<center><a href="denglu.html" class="">前往登陆</a></center>
				</li>
			</ul>
		</form>
	</div>
	<div class='terms' id='terms' style="display:none">
		<ul>
			<li>
				<center><span>服务协议条款</span></center>
			</li>
			<li>
				<center><span>最终解释权归徐卓杰所有</span></center>
			</li>
			<li>
				<center><button id='agree' onclick="HideTerms()">已阅读并同意此条款</button></center>
			</li>
		</ul>
	</div>
</body>
</html>

signup.css

@charset "utf-8";

.fl-l{float: left;}
.fl-r{float: right;}
.tips{
	font-size:14px;
	color: gray;
}
.clearfix:after{
	content:' ';
	display: block;
	clear: both;
}
.login{
	width:1080px;
	height:600px;
	margin:50px auto;
	box-shadow: 0 0 1px 0 #aaa;
	border-radius: 8px;
}
.login ul{
	padding:30px 0;
	list-style: none;
}
.login ul li{
	position: relative;
	margin-bottom:30px;
}
.login ul li span{
	width: 200px;
	text-align: right;
	padding: 0 5px;
}
.login ul li input{
	width: 200px;
	height: 40px;
	border:1px solid #ddd;
	border-radius: 8px;
}
#checkbox,#reset,#zhuce{
	cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
}
#checkbox{
	position: relative;
	width: 20px;
	height: 20px;
}

.terms{
	background-color: lightblue;
	position: absolute;
	top: 10%;
	left: 370px; 
	width:512px;
	height:300px;
	margin:50px auto;
	box-shadow: 0 0 1px 0 #aaa;
	border-radius: 8px;
}
.terms ul{
	padding:50px 0;
	list-style: none;
}
.terms ul li{
	margin-bottom:50px;
}
.terms ul li span{
	font-family: Microsoft YaHei;
}
.terms ul li button{
	width: 270px; /* 宽度 */
	height: 40px; /* 高度 */
	border-width: 0px; /* 边框宽度 */
	border-radius: 3px; /* 边框半径 */
	background: #1E90FF; /* 背景颜色 */
	cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
	font-family: Microsoft YaHei; /* 设置字体 */
	color: white; /* 字体颜色 */
	font-size: 17px; /* 字体大小 */
}
.terms ul li button:hover {
	background: #5599FF;
}

signup.js

//	<script src="js/jquery.min.js"></script>
var script=document.createElement("script");script.type="text/javascript";script.src="/js/jquery.min.js";

window.onload=function(){		//打开重新加载验证码
CreatCode();
//document.getElementById("zhuce").disabled=true;
}

function UsernameCheck(){			//用户名验证
	var username=document.getElementsByName("username")[0].value;
	var xhr = new XMLHttpRequest();
	return true;
}

function PasswordCheck(){			//密码验证
	var password=document.getElementsByName("password1")[0].value;
	var tip=document.getElementById("psw1tip");
	if (password.length>20||password.length<6){
		tip.style.fontSize='16px';
		tip.style.color='red';
		return false;
	}
	else{
		tip.style.fontSize='14px';
		tip.style.color='gray';
		return true;
	}
}

function CheckAgain(){				//确认密码验证
	var password1=document.getElementsByName("password1")[0].value;
	var password2=document.getElementsByName("password2")[0].value;
	var tip=document.getElementById("psw2tip");
	if(password1==password2&&password2.length>5&&password2.length<21){
		tip.style.fontSize='14px';
		tip.style.color='gray';
		return true;
	}
	else{
		tip.style.fontSize='16px';
		tip.style.color='red';
		return false;
	}
}

function CreateColor(){			//生成随机颜色
	var r = Math.floor(Math.random() * 256);
	var g = Math.floor(Math.random() * 256);
	var b = Math.floor(Math.random() * 256);
	return "rgb(" + r + "," + g + "," + b + ")";
}

var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
var code="";
function CreatCode(){					//生成验证码
	var c=document.getElementById("canvas");
	var ctext=c.getContext("2d");
	void ctext.clearRect(0,0,205,55);
	code="";
	for(var i=0;i<4;i++){
	var charNum = Math.floor(Math.random() * 62);
	code=code+codeChars[charNum];
	}
	ctext.font = 'bold 55px 方正雅黑';
	ctext.fillStyle = CreateColor();
	ctext.fillRect(0,0,ctext.width,ctext.height);
	ctext.fillText(code,34,43);
	
	for(var i=0;i<5;i++){			//生成随机曲线
	ctext.beginPath();
	ctext.lineWidth=Math.random() * 4;
	ctext.strokeStyle=CreateColor();
	ctext.moveTo(Math.random() * 205,Math.random() * 55);
	ctext.lineTo(Math.random() * 205,Math.random() * 55);
	ctext.stroke();
	}
	
	for(var i=0; i<10;i++){
        ctext.fillStyle=CreateColor();
        ctext.beginPath();
        ctext.arc(Math.random() * 205,Math.random() * 55, Math.random() * 3, 0, 2*Math.PI);
        ctext.fill();
    }
	
}
function CheckCode(){				//检验验证码
	var inputCode=document.getElementById("inputCode").value;
	var tip=document.getElementById("codetip");
	if(inputCode.toUpperCase()==code.toUpperCase()){
		tip.style.fontSize='14px';
		tip.style.color='gray';
		return true;
	}
	else{
		tip.style.fontSize='16px';
		tip.style.color='red';
		return false;
	}
}

function ShowTerms(){			//展示条款
	document.getElementById("terms").style.display="block";
}

function HideTerms(){			//隐藏条款
	document.getElementById("terms").style.display="none";
	document.getElementById("checkbox").checked=true;
}

function TermsCheck(){			//判断是否同意条款
	if(document.getElementById("checkbox").checked==true){		//点击变选中
		document.getElementsByClassName("Checkbox")[0].style.color="dodgerblue";
		document.getElementById("checkbox").checked=true;
		//document.getElementById("zhuce").disabled=false;
		return true;
	}
	else{														//点击变未选中
		document.getElementsByClassName("Checkbox")[0].style.color="red";
		document.getElementById("checkbox").checked=false;
		//document.getElementById("zhuce").disabled=true;
		return false;
	}
}

function SubmitCheck(){			//注册按钮验证
	if(UsernameCheck()&PasswordCheck()&CheckAgain()&CheckCode()&TermsCheck()){
		return true;
	}
	else{
		return false;
	}
}

signup.php

<?php
header('content-type:text/html;charset=utf-8');

$con = mysql_connect("localhost","root","");
if (!$con){
  die('Could not connect: ' . mysql_error());
}
mysql_select_db('account') or die('选择的数据库不存在!');
mysql_set_charset('utf8');

function userCheck($username){
	$result = mysql_query("SELECT * FROM account1 WHERE username='$username'");
	$row = mysql_fetch_array($result);
	$un=$row['username'];
	if($un==$username)	return false;
	else	return true;
}

$username = isset($_POST['username']) ? $_POST['username'] : "";
$password1 = isset($_POST['password1']) ? $_POST['password1'] : "";
$password2 = isset($_POST['password2']) ? $_POST['password2'] : "";

//待尝试
/*@$username=@$_POST["username"];
@$password1=@$_POST["password1"];
@$password2=@$_POST["password2"];*/

if($username==''){
	echo "请输入账号!";
	exit();
}
if($password1!=$password2){
	echo "密码不一致!";
	exit();
}
 
echo "账户:";
echo $username;

$result = mysql_query("SELECT * FROM account1 WHERE username='$username'");		//数据源?
$row = mysql_fetch_array($result);			//数据id
$un=$row['username'];										//查询到的字符
if($username==$un){
	echo "已存在!";
	exit();
}

$sql="INSERT INTO account1 (username,password,pwd)
VALUES
('$username','$password1','$password2')";
if (mysql_query($sql,$con)){
 	echo "注册成功!";
 }
else
 echo "已存在!";

mysql_close($con);

//echo '<script>alert("注册成功!");location.href="'.denglu.html.'"</script>';

//header("refresh:$;url=denglu.html");

header("Location:denglu.html");
?>

在这里插入图片描述

登陆

signin.html

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<link href="css/signin.css" rel="stylesheet">
	<script src="js/signin.js"></script>
</head>
<body>
	<div class='login'>
		<form id="formin" name="f1" action="signin.php" method="post">
			<ul>
				<li class='clearfix'>
					<center><span class="fl-c">登录</span></center>
				</li>
				<li class='clearfix'>
					<span class='fl-l'>账号</span>
					<input class='fl-l' type="text" name='user' maxlength="11">
				</li>
				<li class='clearfix'>
					<span class='fl-l'>密码</span>
					<input class='fl-l' type="password" name='password'>
				</li>
				<li class='clearfix'>
					<center>
						<canvas id="canvas" class="canvas" width="160px" height="50px" onclick="CreatCode()"></canvas>
					</center>
				</li>
				<li class='clearfix'>
					<center>
						<input type="text" name='code' id="inputCode" class="code" onblur="CheckCode()" maxlength="4" placeholder="请输入验证码(不区分大小写,点击图片更换验证码)">
					</center>
				</li>
				<li class='clearfix' id="liOfCodeTip">
					<center>
						<span id="codeTip"></span>
					</center>
				</li>
				<li>
					<center>
						<input type="submit" name='submit' id="sbmt" value="登录" onclick="return SubmitCheck()">
					</center>
				</li>
				<li class='clearfix' id="liOfCodeSubmit">
					<center>
						<span id="submitTip"></span>
					</center>
				</li>
				<li class='clearfix'>
					<center>
						<input type="reset" onclick="CreatCode()">
					</center><!--不推荐使用center,需要改掉,使用CSS实现-->
				</li>
				<li class='clearfix'>
					<center>
						<p>没有账户?
						<a href="signup.html">立即注册</a>	
						</p>
					</center>
				</li>
			</ul>
		</form>
</body>
</html>

signin.css

@charset "utf-8";

.fl-l{float: left;}
.fl-r{float: right;}
.fl-c{float: initial;}
.clearfix:after{
	content:' ';
	display: block;
	clear: both;
}
.login{
	width:430px;
	height:520px;
	margin:50px auto;
	box-shadow: 0 0 1px 0 #aaa;
	border-radius: 8px;
}
.login ul{
	padding:30px 0;
	list-style: none;
}
.login ul li{
	position: relative;
	margin-bottom:15px;
}
.login ul li span{
	width: 90px;
	line-height: 40px;
	text-align: right;
	padding: 0 5px;
}
.login ul li input{
	width: 310px;
	height: 40px;
	border:1px solid #ddd;
	border-radius: 8px;
}
.login ul li button{
	width: 310px;
	height: 40px;
	border:1px solid #ddd;
	border-radius: 8px;
}
#liOfCodeTip{
	position: relative;
	margin-bottom: -2px;
}
#codeTip{
	width: 50px;
	line-height: 10px;
	text-align: right;
	font-size: medium;
	color:red;
	padding: 0 1px;
}
#liOfCodeSubmit{
	position: relative;
	margin-bottom: -25px;
}
#SubmitTip{
	width: 50px;
	line-height: 1px;
	text-align: right;
	padding: 0 1px;
}


signin.js


var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
var code="";

function createColor(){			//生成随机颜色
	var r = Math.floor(Math.random() * 256);
	var g = Math.floor(Math.random() * 256);
	var b = Math.floor(Math.random() * 256);
	return "rgb(" + r + "," + g + "," + b + ")";
}

function CreatCode(){					//验证码生成
	var c=document.getElementById("canvas");
	var ctext=c.getContext("2d");
	void ctext.clearRect(0,0,160,50);
	code="";
	for(var i=0;i<4;i++){
		var charNum = Math.floor(Math.random() * 62);
		code=code+codeChars[charNum];
	}
	ctext.fillStyle = createColor;
	ctext.fillRect(0,0,ctext.width,ctext.height);
	ctext.font = 'bold 40px 方正雅黑';
	ctext.fillStyle = createColor();
	ctext.fillText(code,40,40);
	
	for(var i=0;i<5;i++){			//生成随机直线
		ctext.beginPath();
		ctext.lineWidth=Math.random() * 4;
		ctext.strokeStyle=createColor();
		ctext.moveTo(Math.random() * 160,Math.random() * 50);
		ctext.lineTo(Math.random() * 160,Math.random() * 50);
		ctext.stroke();
	}
	
	for(var i=0; i<10;i++){
        ctext.fillStyle=createColor();
        ctext.beginPath();
        ctext.arc(Math.random() * 160,Math.random() * 50, Math.random() * 3, 0, 2*Math.PI);
        ctext.fill();
    }
	
}
function CheckCode(){				//验证码验证
	var inputCode=document.getElementById("inputCode").value;
	var inputname=document.getElementsByName("user").value;
	var inputpsw=document.getElementsByName("password").value;
	if (inputCode.length==0){
		document.getElementById("codeTip").innerText="请输入验证码!"
		//document.getElementById("sbmt").disabled=true;
		CreatCode();
		return false;
	}
	else
		if(inputCode.toUpperCase()==code.toUpperCase()){
			document.getElementById("codeTip").innerText=""
			//document.getElementById("sbmt").disabled=false;
			return true;
		}
		else{
			document.getElementById("codeTip").innerText="验证码输入有误!"
			//document.getElementById("sbmt").disabled=true;
			CreatCode();
			return false;
		}
}

function checkPsw(){			//校验密码
	return true;
}

function SubmitCheck(){			//登陆按钮验证
	if(CheckCode()&checkPsw()){
		return true;
	}
	else{
		return false;
	}
}

window.onload=function(){		//打开重新加载验证码
CreatCode();
//document.getElementById("sbmt").disabled=true;
}

signin.php

<?php

header('content-type:text/html;charset=utf-8');

$con = mysql_connect("localhost","root","");
if (!$con){
  die('Could not connect: ' . mysql_error());
}
mysql_select_db('account') or die('选择的数据库不存在!');
mysql_set_charset('utf8');

$user = isset($_POST['user']) ? $_POST['user'] : "";
$psw = isset($_POST['password']) ? $_POST['password'] : "";

echo "用户:";
echo $user;

$result = mysql_query("SELECT * FROM account1 WHERE username='$user'");
if($row = mysql_fetch_array($result)){
	$un=$row['username'];
	$pw=$row['password'];
}
else{
	echo"不存在!";
	exit();
}

if($user==$un && $psw==$pw){
	echo"登录成功!";
}
else 
	echo"账号或密码错误!";

mysql_close($con)

?>

在这里插入图片描述

工具

  • 服务器:搭载在自己电脑上的WampServer
  • 编辑器:Hbuilder和vscode
  • 浏览器:Chrome,Edge,IE,QQ浏览器,每个都要试一下网页能不能兼容(最开始是没注意的,直到看过各种因不兼容而出现奇怪现象的网页)

后续

  现在还有很多缺陷,大家不要留情,指正出来。准备先把导图包含的内容做出来,然后下一步尝试买个服务器学着把它放到网上去,还得努力!

  • 6
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值