七、注册页面实现

PHP经典项目案例-（一）博客管理系统4

本篇使用Ajax实现页面无刷新验证用户名是否存在。

七、注册页面实现

1、注册页面设计

register.php部分代码：

<tr>    <!-- 注册表 -->       <td colspan="3" valign="baseline" style="BACKGROUND-IMAGE: url( images/bg.jpg); VERTICAL-ALIGN: middle; HEIGHT: 450px; TEXT-ALIGN: center">
<br>        <form name="myform" action="register_deal.php" method="post">           <table width="85%" border="1" align="center" cellpadding="3" cellspacing="2" bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="i_table">             <tr align="left" bgcolor="#EFF7DE">               <td height="22" colspan="2" bgcolor="#EFF7DE" class="right_head"><span class="tableBorder_LTR">必填内容</span></td>             </tr>             <tr bgcolor="#FFFFFF">               <td width="22%" align="right" valign="middle" class="'f_one'"> 用户名</td>               <td width="78%" align="left" class="'f_one'">
<input name="'txt_regname'" type="text" id="txt_regname" value="''" size="20" maxlength="14" onblur="javascript:chkUserName();">               <label id="l1">*</label><label id="ll1" class="label2"></label>              </td>             </tr>             <tr bgcolor="#FFFFFF">               <td align="right" valign="middle"> 真实姓名</td>               <td align="left"> <input name="'txt_regrealname'" type="'text'" id="txt_regrealname" size="'20'" maxlength="'75'" onblur="javascript:chkRealName()">                              <label id="l4">*</label><label id="ll4" class="label2"></label>
</td>             </tr>             <tr>             </tr>
<tr bgcolor="#FFFFFF">               <td align="right" valign="middle"> 密码</td>               <td align="left"> <input name="'txt_regpwd'" type="'password'" id="txt_regpwd" size="20" maxlength="75" onblur="javascript:chkPwd();">               英文字母或数字等不少于3位<label id="l2">*</label><label id="ll2" class="label2"></label>
</td>             </tr>             <tr bgcolor="#FFFFFF">               <td align="right" valign="middle"> 确认密码</td>               <td align="left"> <input name="'txt_regpwd2'" type="'password'" id="txt_regpwd2" size="20" maxlength="75" onblur="javascript:chkRePwd()">               <label id="l3">*</label><label id="ll3" class="label2"></label>
</td>             </tr>             <tr bgcolor="#FFFFFF">               <td align="right"> 出生日期</td>               <td align="left"> <span class="word_grey">                 <input name="txt_birthday" type="text" id="birth" onblur="javascript:chkBirth()">               （日期格式为：yyyy-mm-dd）<label id="l6">*</label><label id="ll6" class="label2"></label></span>
</td>             </tr>             <tr bgcolor="#FFFFFF">               <td align="right" valign="middle"> Email</td>               <td align="left"> <input name="txt_regemail" type="text" id="txt_regemail" value="''" size="35" maxlength="75" onblur="javascript:chrEmail()">               <font color="'#000000'">公开邮箱 <label id="l5">*</label><label id="ll5" class="label2"></label></font>
</td>             </tr>             <tr bgcolor="#FFFFFF">               <td align="right">所在城市</td>               <td align="left">                <select name="txt_province" id="txt_province" onchange="javascript:initcity();">                   <script>creatprovince();</script>                 </select>                 <select name="txt_city" id="txt_city"> </select>               <font color="red">*</font> </td>             </tr>             <tr bgcolor="#FFFFFF">               <td align="right" valign="middle" class="'f_one'"> 选择头像：</td>               <td align="left" class="'f_one'"><table width="106" cellpadding="0" cellspacing="0">                   <tr>                     <td width="10" height="47">					</td>                     <td width="80"><img  src="images/head/0.gif" name="img" id="image"    style="max-width:90%"  style="max-width:90%" alt="七、注册页面实现" ></td>                     <td width="53" rowspan="2" align="center"><font color="red">*</font></td>                   </tr>                   <tr>                     <td> </td>                     <td> <select name="txt_ico" size="1" id="txt_ico" onchange="javascript:showlogo()">                         <option value="0.gif" selected>头像1                        </option>
<option value="1.gif">头像2                        </option>
<option value="2.gif">头像3                        </option>
<option value="3.gif">头像4</option>                         <option value="4.gif">头像5</option>                         <option value="5.gif">头像6</option>                       </select> </td>                   </tr>               </table></td>             </tr>             <tr align="left" bgcolor="#EFF7DE">               <td height="22" colspan="2" class="right_head"><span class="tableBorder_LTR">选填内容</span></td>             </tr>             <tr bgcolor="#FFFFFF">               <td align="right" class="'f_one'"> 性别</td>               <td align="left" class="'f_one'"> <select name="txt_regsex" id="txt_regsex">                   <option value="1">男</option>                   <option value="2">女</option>                   <option value="0" selected>保密</option>               </select>
</td>             </tr>             <tr bgcolor="#FFFFFF">               <td align="right" class="'f_one'">QQ</td>               <td align="left" class="'f_one'"><input name="'txt_regqq'" type="text" id="txt_regqq" value="''" size="20" maxlength="14"></td>             </tr>             <tr bgcolor="#FFFFFF">               <td align="right" class="'f_one'"> 个人主页</td>               <td align="left" class="'f_one'"> <input name="'txt_reghomepage'" type="text" id="txt_reghomepage" value="''" size="40" maxlength="75">
</td>             </tr>             <tr bgcolor="#FFFFFF">               <td align="right" valign="middle" class="'f_one'">个性化签名</td>               <td align="left" class="'f_one'"><textarea name="'txt_regsign'" cols="50" rows="'4'" id="txt_regsign"></textarea></td>             </tr>             <tr bgcolor="#FFFFFF">               <td align="right" class="'f_one'"> 自我简介</td>               <td align="left" class="'f_one'"><textarea name="txt_regintroduce" cols="50" rows="4" id="txt_regintroduce"></textarea></td>             </tr>           </table>           <br>             <input type="'submit'" name="'regsubmit'" value="'提" onclick="return check()">              <input name="reset" type="reset" class="btn_grey" value="重 填">      </form>      </td>     </tr> 

2、输入框失去焦点后调用的javascript函数实现：fun.js：

function chkUserName(){	var c = document.getElementById('txt_regname');	var d = c.value;	var id;	if(d==""){				document.getElementById('l1').innerText="请输入用户名";		document.getElementById('ll1').innerText="";	}else{		var xmlObj;		xmlObj = new XMLHttpRequest();			xmlObj.open('POST','chk.php?d='+d,true);		xmlObj.onreadystatechange = callBackFun;		xmlObj.send(null);		function callBackFun() {			if(xmlObj.readyState == 4&&xmlObj.status ==200){				if(xmlObj.responseText=='y'){					document.getElementById('l1').innerText="×";					document.getElementById('ll1').innerText="";				}else{					document.getElementById('l1').innerText="";					document.getElementById('ll1').innerText="√";				}			}		}	}}function chkRealName(){	var c = document.getElementById('txt_regrealname');	var d = c.value;	if(d==""){				document.getElementById('l4').innerText="请输入真实姓名";		document.getElementById('ll4').innerText="";	}else{		document.getElementById('l4').innerText="";		document.getElementById('ll4').innerText="√";	}}function chkPwd(){	var p = document.getElementById('txt_regpwd').value;	var c = document.getElementById('ll1').innerText;	if(c=="√"){		if(p==""){			document.getElementById('l2').innerText="请输入密码";		}		else if(p.length<br><h2>3、Ajax验证用户名使用的处理文件chk.php:</h2><p>'</p><pre name="code" class="php"><?php require_once &#39;Conn/SqlHelper.class.php&#39;;    $chk = $_REQUEST[&#39;d&#39;];    $sqlHelper = new SqlHelper();    $sql = "select * from tb_user where regname=&#39;$chk&#39;;";    $res = $sqlHelper->execute_dql($sql);    $s = $res->fetch_assoc();    if(count($s)!=0){        echo 'y';    }else{        echo 'n';    }

4、注册后将用户添加到数据库registerdeal.php

<?phpsession_start ();include "Conn/SqlHelper.class.php";$sqlHelper = new SqlHelper();$UserName=$_POST[&#39;txt_regname&#39;];$sql="select * from tb_user where regname = &#39;$UserName&#39;";$res = $sqlHelper->execute_dql($sql);$result=$res->fetch_assoc();if (count($result)!=0){	echo ("<script>alert(&#39;用户名已被注册！&#39;);history.go(-1);</script>");	exit();}$_SESSION['username']=$_POST['txt_regname'];$regname=$_POST['txt_regname'];$regrealname=$_POST['txt_regrealname'];$regpwd=$_POST['txt_regpwd'];$regbirthday=$_POST['txt_birthday'];$regemail=$_POST['txt_regemail'];$regcity=$_POST['txt_province'].$_POST['txt_city'];$regico=$_POST['txt_ico'];$regsex=$_POST['txt_regsex'];$regqq=$_POST['txt_regqq'];$reghomepage=$_POST['txt_reghomepage'];$regsign=$_POST['txt_regsign'];$regintroduce=$_POST['txt_regintroduce'];$ip=getenv(REMOTE_ADDR);$sql = "Insert Into tb_user (regname,regrealname,regpwd,regbirthday,regemail,regcity,regico,regsex,regqq,reghomepage,regsign,regintroduce,ip,fig)"." Values ('$regname','$regrealname','$regpwd','$regbirthday','$regemail','$regcity','$regico','$regsex','$regqq','$reghomepage','$regsign','$regintroduce','$ip',0)";$INS=$sqlHelper->execute_dml($sql);echo "<script> alert(&#39;用户注册成功！&#39;);</script>";echo "<script> window.location=&#39;index.php&#39;;</script>";?>

至此，用户注册已经实现。