Home > Backend Development > PHP Tutorial > 七、注册页面实现

七、注册页面实现

WBOY
Release: 2016-06-13 12:11:20
Original
1215 people have browsed it

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> 
Copy after login

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';    }
Copy after login

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>";?>
Copy after login


至此,用户注册已经实现。
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template