用php搭建管理系统经典案例,PHP经典项目案例-（一）博客管理系统4

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

七、注册页面实现

1、注册页面设计 register.php部分代码： 必填内容

用户名 type=text id="txt_regname" value=''

size=20 maxlength=14 onblur="javascript：chkUserName();"/> *

真实姓名 type='text'

id="txt_regrealname" size='20'

maxlength='75'

onblur="javascript：chkRealName()"/> *

密码 type='password'

id="txt_regpwd" size=20 maxlength=75 onblur="javascript：chkPwd();"/> 英文字母或数字等不少于3位*

确认密码 type='password'

id="txt_regpwd2" size=20 maxlength=75 onblur="javascript：chkRePwd()"> *

出生日期 (日期格式为：yyyy-mm-dd)*

Email size=35 maxlength=75 onblur="javascript：chrEmail()"/> 公开邮箱 *

所在城市 *

选择头像： *

澶村儚1澶村儚2澶村儚3澶村儚4澶村儚5澶村儚6

选填内容

性别 男Ů保密

QQ type=text id="txt_regqq" value=''

size=20 maxlength=14>

个人主页 type=text id="txt_reghomepage" value=''

size=40 maxlength=75>

个性化签名 cols=50 rows='4'

id="txt_regsign">

自我简介

name='regsubmit'

value='提 交'class="btn_grey" onclick="return check()">

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: '4、注册后将用户添加到数据库registerdeal.php 至此，用户注册已经实现。