天天看點
傳回

前端注冊頁面

這幾天我花了不少時間為我們工作室寫一個注冊頁面。說起來也覺得自己也沒什麼拿得出來的，暑假之前我對網絡程式設計根本是一無所知，甚至連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" target="_blank" rel="external nofollow"  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="#" target="_blank" rel="external nofollow" >使用者條款</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][email protected]([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的資料庫連接配接對象。

至于做出來的效果嘛……

前端注冊頁面

好了，就這麼多，高手勿噴，我隻是一個萌萌哒小程式猿……

前端注冊頁面
前端 html 表單 xmlhttprequest css3
上一篇: HTML簡單注冊頁面
下一篇: 一個注冊頁面的HTML實作

繼續閱讀