PHP經典項目案例-（一）博客管理系統4

本篇使用Ajax實現頁面無刷新驗證用戶名是否存在。

七、注冊頁面實現

1、注冊頁面設計

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:

execute_dql($sql);
    $s = $res->fetch_assoc();
    if(count($s)!=0){
        echo 'y';
    }else{
        echo 'n';
    }

4、注冊後將用戶添加到數據庫registerdeal.php

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>";
?>