Heim > Backend-Entwicklung > PHP-Tutorial > 七、注册页面实现

七、注册页面实现

WBOY
Freigeben: 2016-06-13 12:11:20
Original
1228 Leute haben es durchsucht

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> 
Nach dem Login kopieren

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';    }
Nach dem Login kopieren

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>";?>
Nach dem Login kopieren


至此,用户注册已经实现。
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage