前端注册页面

来源：互联网发布：逆袭网络剧第三集土豆编辑：程序博客网时间：2024/05/16 10:44

这几天我花了不少时间为我们工作室写一个注册页面。说起来也觉得自己也没什么拿得出来的，暑假之前我对网络编程根本是一无所知，甚至连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" onsubmit="return check();">  <input name="nickname" type="text" id="nickname" placeholder="昵称" onfocus="focuss(this,lb1);" onblur="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="邮箱" onfocus="focuss(this,lb2);" onblur="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="密码" onfocus="focuss(this,lb3);" onblur="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="确认密码" onfocus="focuss(this,lb4);" onblur="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" onclick="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 Documentvar 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";elseecho "0";}?>

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

至于做出来的效果嘛……

好了，就这么多，高手勿喷，我只是一个萌萌哒小程序猿……

0 0