PHP+ajax实现注册的一个完整的例子
看到网上有很多人在寻找php+ajax实现注册例子,就简单的写了一个,在实际应用中,有些地方可能还需要进行一些局部的调整,不过本例完全实现了注册的功能。
库结构为:username varchr(10); email varchr(10); pass varchr(10)
<script language="javascript">
var http_request = false;
function send_request(url) {//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常,创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("get", url, true);
http_request.send(null);
}
// 处理返回信息的函数
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回,开始处理信息
var rtnText=http_request.responseText.substring(1);
if(rtnText=="namerepeat")
{
msg1.style.color="red";
msg1.innerHTML =" 登陆名已经被使用了!";
return false;
} else if (rtnText=="nameok"){
msg1.style.color="green";
msg1.innerHTML =" 该登陆名可以进行注册!";
}else if (rtnText=="emailrepeat"){
msg2.style.color="red";
msg2.innerHTML =" 该邮箱已经被注册过了!";
}else if (rtnText=="emailok"){
msg2.style.color="green";
msg2.innerHTML =" 该邮箱可以进行注册!";
}else if (rtnText=="regSuccess"){
msg5.style.color="green";
msg5.innerHTML =" 注册成功!";
}else {
msg5.style.color="red";
msg5.innerHTML =" 注册失败,原因为:"+rtnText;
}
return;
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
function checkValid(id) {
// id对应于提交注册信息的Form中的表单域
// 以下实际上还要加上对各个域的长度等的有效性验证,本例就省略了
if(id=="1") {
username=document.theForm.username.value;
if (username!="") {
msg1.innerHTML=" 正在检测,请稍候……";
send_request("regCheck.php?actionType=checkUserName&userName="+username+"&ran="+Math.random());
}else {
msg1.style.color="red";
msg1.innerHTML=" 用户名可以是数字或字符的组合,不能超过20个字符长度,不能是中文,不能含有任何的标点符号!";
}
} else if(id=="2"){
email=document.theForm.email.value;
if (email!="") {
msg2.innerHTML=" 正在检测,请稍候……";
send_request("regCheck.php?actionType=checkEmail&email="+email+"&ran="+Math.random());
}else {
msg2.style.color="red";
msg2.innerHTML=" 请填写注册用的email地址!";
}
}
else if(id=="3"){
pass=document.theForm.pass.value;
if (pass=="") {
msg3.style.color="red";
msg3.innerHTML=" 密码不能为空……";
}
}
else if(id=="4"){
pass=document.theForm.pass.value;
passagain=document.theForm.passagain.value;
if (passagain=="") {
msg4.style.color="red";
msg4.innerHTML=" 请再输入一遍密码!";
}else if(pass!=passagain) {
msg4.style.color="red";
msg4.innerHTML=" 两次输入的密码不相同,请重新输入!";
}
}
}
function submitForm() {
// 此处实际上还要加上对各个域的长度等的有效性验证,本例就省略了
msg5.style.color="red";
msg5.innerHTML=" 正在提交注册信息,请稍候……";
userName=document.theForm.username.value;
email=document.theForm.email.value;
pass=document.theForm.pass.value;
send_request("regCheck.php?actionType=submit&userName="+userName+"&email="+email+"&pass="+pass+"&ran="+Math.random());
}
</script>
<form name="theForm">
<div>UserName : <input type="text" name="username" οnblur="checkValid(1)"/><span id="msg1"></span></div>
<div>Email : <input type="text" name="email" οnblur="checkValid(2)"/><span id="msg2"></span></div>
<div>Password : <input type="text" name="pass" οnblur="checkValid(3)"/><span id="msg3"></span></div>
<div>Password Again : <input type="text" name="passagain" οnblur="checkValid(4)" /><span id="msg4"></span></div>
</form>
<div id="msg5"></div>
<div><input type="button" name="btnReg" value="Submit" οnclick="submitForm()"/>
<? require '../inc/conn.php'; ?>
<?
$actionType = $_GET['actionType'];
switch($actionType)
{
case 'checkUserName':
checkUserName();
break;
case 'checkEmail':
checkEmail();
break;
case 'submit':
submitToDb();
break;
default:
break;
}
function checkUserName() {
………&
看到网上有很多人在寻找php+ajax实现注册例子,就简单的写了一个,在实际应用中,有些地方可能还需要进行一些局部的调整,不过本例完全实现了注册的功能。
库结构为:username varchr(10); email varchr(10); pass varchr(10)
一共有两个文件reg.php和regCheck.php;reg.php是注册页面,regCheck.php是检测页面,在regCheck.php页面中,为了简明易懂,我把对数据库的操作直接写在了各个函数中,实际应用中可以将这些对数据库的操作写到一个Model中去。
<script language="javascript">
var http_request = false;
function send_request(url) {//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常,创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("get", url, true);
http_request.send(null);
}
// 处理返回信息的函数
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回,开始处理信息
var rtnText=http_request.responseText.substring(1);
if(rtnText=="namerepeat")
{
msg1.style.color="red";
msg1.innerHTML =" 登陆名已经被使用了!";
return false;
} else if (rtnText=="nameok"){
msg1.style.color="green";
msg1.innerHTML =" 该登陆名可以进行注册!";
}else if (rtnText=="emailrepeat"){
msg2.style.color="red";
msg2.innerHTML =" 该邮箱已经被注册过了!";
}else if (rtnText=="emailok"){
msg2.style.color="green";
msg2.innerHTML =" 该邮箱可以进行注册!";
}else if (rtnText=="regSuccess"){
msg5.style.color="green";
msg5.innerHTML =" 注册成功!";
}else {
msg5.style.color="red";
msg5.innerHTML =" 注册失败,原因为:"+rtnText;
}
return;
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
function checkValid(id) {
// id对应于提交注册信息的Form中的表单域
// 以下实际上还要加上对各个域的长度等的有效性验证,本例就省略了
if(id=="1") {
username=document.theForm.username.value;
if (username!="") {
msg1.innerHTML=" 正在检测,请稍候……";
send_request("regCheck.php?actionType=checkUserName&userName="+username+"&ran="+Math.random());
}else {
msg1.style.color="red";
msg1.innerHTML=" 用户名可以是数字或字符的组合,不能超过20个字符长度,不能是中文,不能含有任何的标点符号!";
}
} else if(id=="2"){
email=document.theForm.email.value;
if (email!="") {
msg2.innerHTML=" 正在检测,请稍候……";
send_request("regCheck.php?actionType=checkEmail&email="+email+"&ran="+Math.random());
}else {
msg2.style.color="red";
msg2.innerHTML=" 请填写注册用的email地址!";
}
}
else if(id=="3"){
pass=document.theForm.pass.value;
if (pass=="") {
msg3.style.color="red";
msg3.innerHTML=" 密码不能为空……";
}
}
else if(id=="4"){
pass=document.theForm.pass.value;
passagain=document.theForm.passagain.value;
if (passagain=="") {
msg4.style.color="red";
msg4.innerHTML=" 请再输入一遍密码!";
}else if(pass!=passagain) {
msg4.style.color="red";
msg4.innerHTML=" 两次输入的密码不相同,请重新输入!";
}
}
}
function submitForm() {
// 此处实际上还要加上对各个域的长度等的有效性验证,本例就省略了
msg5.style.color="red";
msg5.innerHTML=" 正在提交注册信息,请稍候……";
userName=document.theForm.username.value;
email=document.theForm.email.value;
pass=document.theForm.pass.value;
send_request("regCheck.php?actionType=submit&userName="+userName+"&email="+email+"&pass="+pass+"&ran="+Math.random());
}
</script>
<form name="theForm">
<div>UserName : <input type="text" name="username" οnblur="checkValid(1)"/><span id="msg1"></span></div>
<div>Email : <input type="text" name="email" οnblur="checkValid(2)"/><span id="msg2"></span></div>
<div>Password : <input type="text" name="pass" οnblur="checkValid(3)"/><span id="msg3"></span></div>
<div>Password Again : <input type="text" name="passagain" οnblur="checkValid(4)" /><span id="msg4"></span></div>
</form>
<div id="msg5"></div>
<div><input type="button" name="btnReg" value="Submit" οnclick="submitForm()"/>
<input type="reset" name="btnReset" value="Reset"/></div>
<? require '../inc/conn.php'; ?>
<?
$actionType = $_GET['actionType'];
switch($actionType)
{
case 'checkUserName':
checkUserName();
break;
case 'checkEmail':
checkEmail();
break;
case 'submit':
submitToDb();
break;
default:
break;
}
function checkUserName() {
………&