1. 云栖社区>
  2. PHP教程>
  3. 正文

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

作者:用户 来源:互联网 时间:2017-12-01 12:34:46

博客管理系统用户名经典注册页面

PHP经典项目案例-(一)博客管理系统4 - 摘要: 本文讲的是PHP经典项目案例-(一)博客管理系统4, 本篇使用Ajax实现页面无刷新验证用户名是否存在。 七、注册页面实现 1、注册页面设计 register.php部分代码: <tr><!-- 注册表 --> <td colSpan=3 valign="bas

本篇使用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><formname="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 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></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></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=middleclass='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" width="60" height="60"></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 value="1.gif">头像2<option value="2.gif">头像3<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='提 交'class="btn_grey" 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<3){		document.getElementById('l2').innerText="×";		document.getElementById('ll2').innerText="";		}else{		document.getElementById('l2').innerText="";		document.getElementById('ll2').innerText="√";	}	}}function chkRePwd(){	var p = document.getElementById('txt_regpwd').value;	var rp = document.getElementById('txt_regpwd2').value;	var c = document.getElementById('ll2').innerText;	if(c=="√"){	if(p==rp){		document.getElementById('ll3').innerText="√";		document.getElementById('l3').innerText="";	}else{		document.getElementById('ll3').innerText="";		document.getElementById('l3').innerText="× 密码不一致";	}	}}function chkBirth(){	var c = document.getElementById('birth');	var d = c.value;	if(d==""){				document.getElementById('l6').innerText="请输入出生日期";		document.getElementById('ll6').innerText="";	}else{		document.getElementById('l6').innerText="";		document.getElementById('ll6').innerText="√";	}}function chkEmail(){	var e = document.getElementById('txt_regemail').value;	if(e==""){				document.getElementById('l5').innerText="请输入邮箱";		document.getElementById('ll5').innerText="";	}else{		document.getElementById('l5').innerText="";		document.getElementById('ll5').innerText="√";	}}

3、Ajax验证用户名使用的处理文件chk.php:

'
<?php	require_once 'Conn/SqlHelper.class.php';	$chk = $_REQUEST['d'];	$sqlHelper = new SqlHelper();	$sql = "select * from tb_user where regname='$chk';";	$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['txt_regname'];$sql="select * from tb_user where regname = '$UserName'";$res = $sqlHelper->execute_dql($sql);$result=$res->fetch_assoc();if (count($result)!=0){	echo ("<script>alert('用户名已被注册。');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('用户注册成功。');</script>";echo "<script> window.location='index.php';</script>";?>
至此,用户注册已经实现。

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索博客 , 管理系统 , 用户名 , 经典 注册页面 ,以便于您获取更多的相关知识。