这几天我花了不少时间为我们工作室写一个注册页面。说起来也觉得自己也没什么拿得出来的,暑假之前我对网络编程根本是一无所知,甚至连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的数据库连接对象。
至于做出来的效果嘛……
好了,就这么多,高手勿喷,我只是一个萌萌哒小程序猿……