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

七、注册页面实现

1、注册页面设计

           
        
           
             
               
必填内容
             
             
               
 用户名
               
               *              
             
             
               
 真实姓名
               
                               *
             
             
             
               
 密码
               
                英文字母或数字等不少于3位*
             
             
               
 确认密码
               
                *
             
             
               
 出生日期
               
                                 （日期格式为：yyyy-mm-dd）*
             
             
               
 Email
               
                公开邮箱 *
             
             
               
所在城市
               
                                   <script>creatprovince();</script>                                                  * 
             
             
               
 选择头像：
               
                   
                     
					
                     
                     
*
                   
                   
                     
 
                     
                          头像1                        头像2                        头像3                        头像4                         头像5                         头像6                        
                   
               
             
             
               
选填内容
             
             
               
 性别
               
                    男                   女                   保密               
             
             
               
QQ
               
             
             
               
 个人主页
               
 
             
             
               
个性化签名
               
             
             
               
 自我简介
               
             
           
           
                                 
            

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