前端注册页面

最新推荐文章于 2024-08-13 17:16:47 发布

poklau123

最新推荐文章于 2024-08-13 17:16:47 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签： html 前端表单 xmlhttprequest css3

本文链接：https://blog.csdn.net/poklau/article/details/40408983

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这几天我花了不少时间为我们工作室写一个注册页面。说起来也觉得自己也没什么拿得出来的，暑假之前我对网络编程根本是一无所知，甚至连HTML也只有个模糊的了解，而且暑假我学的也只是PHP和mysql……。但是，既然自己努力去学了，努力去做了，即使做出来的东西比起前端工程师来不值一提，也该有勇气拿出来和大家分享。

首先贴出HTML：

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="register.css" type="text/css"/>
  <script type="text/javascript" src="register.js"></script>
  <title>注册用户</title>
  </head>
  <body>
  <!-- 顶部灰色栏 -->
  <div id="top">
    <div class="title">
  		<p id="logo">XQT</p>
  		<p id="says">兴趣，引领未来！</p>
  	</div>
  </div>
 
 <!-- 底部部白色栏 --> 
  <div id="bottom">
  </div>
  
  <div id="register">
  <div class="regheader">
  <p id="headersay">注册新用户</p>
  </div>
  <div class="main">
  <form action="tmp.php" method="post" name="reg" οnsubmit="return check();">
  <input name="nickname" type="text" id="nickname" placeholder="昵称" οnfοcus="focuss(this,lb1);" οnblur="suitable(this,lb1);"/>
  <img src="yes.png" width="20" height="20" id="yes1" hidden="true"/>
  <label id="lb1"></label><br/>
  <input name="email" type="text" id="email" placeholder="邮箱" οnfοcus="focuss(this,lb2);" οnblur="suitable(this,lb2);"/>
  <img src="yes.png" width="20" height="20" id="yes2" hidden="true"/>
  <label id="lb2"></label><br/>
  <input name="password" type="password" id="password" placeholder="密码" οnfοcus="focuss(this,lb3);" οnblur="suitable(this,lb3);"/>
  <img src="yes.png" width="20" height="20" id="yes3" hidden="true"/>
  <label id="lb3"></label><br/>
  <input name="password" type="password" id="password1" placeholder="确认密码" οnfοcus="focuss(this,lb4);" οnblur="suitable(this,lb4);"/>
  <img src="yes.png" width="20" height="20" id="yes4" hidden="true"/>
  <label id="lb4"></label><br/>
  <input name="agree" type="checkbox" id="agree" value="check" οnclick="agreed();"/>
  <label>同意<a href="#">用户条款</a></label><br />
  <input name="" type="submit" id="ungo" value="注册" disabled="disabled"/>
  </form> 
  </div>
  </div>
  </body>
  </html>

html标签只是一个模子，要想让前端看得漂亮还得用css，要想更漂亮就得用css3的一些相关特性了：

@charset "utf-8";
/* CSS Document */

body
{
	margin:0;
}

#top
{
	background-color:rgb(204,204,204);
	width:100%;
	height:250px;
	margin:0px;
}

#bottom
{
	width:100%;
	height:100%;
}

.title
{
	position:absolute;
	margin-left:35%;
	margin-top:50px;
}

#logo
{
	display:inline;
	font-family:微软雅黑;
	font-size:5em;
	color:white;
}

#says
{
	display:inline;
	font-family:微软雅黑;
	font-size:1em;
	color:white;
}


#register
{
	position:absolute;
	background-color:rgb(245,245,245);
	width:600px;
	height:450px;
	//border:1px solid red;
	border-radius:5px;
	margin-left:28%;
	top:180px;
}

.regheader
{
	background-color:rgb(50,50,50);
	width:100%;
	height:70px;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}

#headersay
{
	display:inline;
	position:absolute;
	margin-left:40%;
	font-size:1.5em;
	font-family:微软雅黑;
	color:white;
}
input
{
	border-style: none;
	border-radius: 5px;
	margin-top: 20px;
	height: 40px;
	width: 300px;
	font-size:16px;
	font-family:微软雅黑;
}

#agree
{
	width:20px;
	height:20px;
}

.main
{
	text-align:center;
	//border:1px solid red;
	margin-top:10px;
	
}

.main label
{
	font-size:12px;
	padding-left:-10px;;
}

#go:hover
{
	-webkit-transition:background-color 0.2s,width 0.2s,color 0.5s;
	background-color:#F60;
	width:350px;
	color:yellow;
	cursor:pointer;
}

#lb1,#lb2,#lb3,#lb4,#yes1,#yes2,#yes3,#yes4
{
	position:absolute;
	margin-top:30px;
	margin-left:10px;
	color:red;
}

要想验证表单的信息，当然少不了javascript和ajax：

// JavaScript Document

var pass=true;

function suitable(obj,lb)
{
	
	switch(obj.id)
	{
		case "nickname":loadXMLDoc(obj,1,lb);break;
		case "email":loadXMLDoc(obj,2,lb);break;
		case "password":pswdlen(obj,lb);break;
		case "password1":pswdcheck(obj,lb);break;
	}
}

function focuss(obj,lb)
{
	obj.style.boxShadow="0 0 2px 1px #fff";
	lb.innerHTML="";
}

function agreed()
{
	var agree=document.getElementById("agree");
	var goto=document.getElementById("go");
	var ungo=document.getElementById("ungo");
	if(agree.checked==true)
	{
		ungo.id="go";
		ungo.disabled=false;
	}
	else
	{
		goto.disabled=true;
		goto.id="ungo";
	}
		
}

function check()
{
	
	
	var nickname=document.getElementById("nickname");
	var email=document.getElementById("email");
	var password=document.getElementById("password");
	var password1=document.getElementById("password1");
	
	if(nickname.value=="")
	{
		nickname.style.boxShadow="0 0 2px 1px #ff6f00";
		document.getElementById("lb1").innerHTML="请输入账号！";
		document.getElementById("yes1").hidden=true;
		pass=false;
		}
	if(email.value=="")
	{
		email.style.boxShadow="0 0 2px 1px #ff6f00";
		document.getElementById("lb2").innerHTML="请输入邮箱！";
		document.getElementById("yes2").hidden=true;
		pass=false;
		}
	if(password.value=="")
	{
		password.style.boxShadow="0 0 2px 1px #ff6f00";
		document.getElementById("lb3").innerHTML="请输入密码！";
		document.getElementById("yes3").hidden=true;
		pass=false;
		}
	if(password1.value=="")
	{
		password1.style.boxShadow="0 0 2px 1px #ff6f00";
		document.getElementById("lb4").innerHTML="请确认密码！";
		document.getElementById("yes4").hidden=true;
		pass=false;
		}
	return pass;
}

function checknickname(obj,result,lb)
{
	if(result=="1")
	{
		lb.innerHTML="该昵称已存在！";
		obj.style.boxShadow="0 0 2px 1px #ff6f00";
		document.getElementById("yes1").hidden=true;
		pass=false;
	}
	else if(result=="0")
	{
		//lb.innerHTML="该昵称可用！";
		document.getElementById("yes1").hidden=false;
	}
	else
	{
		lb.innerHTML="验证失败！";
	}
}

function checkemail(obj,result,lb)
{
	if(result=="1")
	{
		lb.innerHTML="该邮箱已注册！";
		obj.style.boxShadow="0 0 2px 1px #ff6f00";
		document.getElementById("yes2").hidden=true;
		pass=false;
	}
	else if(result=="0")
	{
		//lb.innerHTML="该邮箱可用！";
		reg=/^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/gi;
		if(!reg.test(obj.value))
		{
			lb.innerHTML="邮箱格式错误！";
			obj.style.boxShadow="0 0 2px 1px #ff6f00";
			document.getElementById("yes2").hidden=true;
			pass=false;	
		}
		else	 
		document.getElementById("yes2").hidden=false;
	}
	else
	{
		lb.innerHTML="验证失败！";
	}
}

function pswdlen(obj,lb)
{
	if(obj.value.length<6)
	{
		lb.innerHTML="密码长度不够";
		obj.style.boxShadow="0 0 2px 1px #ff6f00";
		document.getElementById("yes3").hidden=true;
		pass=false;
	}
	else
		//lb.innerHTML="OK";
		document.getElementById("yes3").hidden=false;
}

function pswdcheck(obj,lb)
{
	var psd=document.getElementById("password").value;
	if(psd!=obj.value)
	{
		lb.innerHTML="两次密码输入不同！";
		obj.style.boxShadow="0 0 2px 1px #ff6f00";
		document.getElementById("yes4").hidden=true;
		pass=false;	
	}
	else
		//lb.innerHTML="OK";
		document.getElementById("yes4").hidden=false;
}


function loadXMLDoc(obj,type,lb)
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    var result=xmlhttp.responseText;
	switch(type)
	{
		case 1:checknickname(obj,result,lb);break;
		case 2:checkemail(obj,result,lb);break;
	}
    }
  }
xmlhttp.open("POST","ajax/checkinput.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("value="+obj.value+"&type="+type);
}

这些javascript代码写得确实繁琐，毕竟自己并不怎么了解javascript，也没有经验，将就着也用得过去~

然后就是ajax调用php进行验证时的php源码：

<?php 
//$type=$_GET['type'];
//$value=$_GET['value'];

$type=$_POST['type'];
$value=$_POST['value'];
switch ($type)
{
	case 1:checknickname($value);break;
	case 2:checkemail($value);break;
	default: echo"type unclear!";
}

function checknickname($value)
{
require '../../phpfiles/db_link.php';
$query="select * from tb_information where nickname='".$value."'";
$result=$db->query($query);
$numrow=mysqli_num_rows($result);
if($numrow==1)
	echo "1";
else 
	echo "0";
}

function checkemail($value)
{
	require '../../phpfiles/db_link.php';
	$query="select * from tb_information where mail='".$value."'";
	$result=$db->query($query);
	$numrow=mysqli_num_rows($result);
	if($numrow==1)
		echo "1";
	else
		echo "0";
}
?>

require '../../phpfiles/db_link.php';这句引用的是一个数据库连接脚本，里面有一个$db的数据库连接对象。

至于做出来的效果嘛……