userreg.html ( 注册页面) ajaxreg .js(AJAX脚本及实时验证的JS脚本) checkuserreg .php(连接数据库并检测用户名是否已注册的页面) userreg.html ( 注册页面) 复制PHP内容到剪贴板 PHP代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script language="javascript" src="ajaxreg.js"></script> <script language="javascript" type="text/javascript"> function check(){ //用户名为空的时候 if(document.reg.username.value==""){ document.getElementById('check').innerHTML=" <font color=red>用户名不能为空!</font>"; document.reg.username.focus(); return false; } if(document.getElementById('check').innerHTML==" <font color=red>The number is registed</font>"){ //用户名已被注册的时候(<font color=red>The number is registed</font>是AJAX返回回来的) document.reg.username.focus(); return false; } if(document.reg.userpwd.value==""){ //密码为空的时候 document.getElementById('pwd').innerHTML=" <font color=red>用户密码不能为空!</font>"; document.reg.userpwd.focus(); return false; } if(document.reg.userpwd.value.length<6){ //密码长度错误的时候 document.getElementById('pwd').innerHTML=" <font color=red>密码长度不能小于6位!</font>"; document.reg.userpwd.focus(); return false; } if (document.reg.reuserpwd.value==""){ //没有再次输入密码的时候 document.getElementById('repwd').innerHTML=" <font color=red>请再输入一次密码!</font>"; document.reg.reuserpwd.focus(); return false; } if(document.reg.userpwd.value!=document.reg.reuserpwd.value){ //再次输入密码不正确的时候 document.getElementById('repwd').innerHTML=" <font color=red>两次输入的密码不一致!</font>"; document.reg.reuserpwd.focus(); return false; } return true; //上面的验证都通过则return true,页面信息将被POST到checkuserreg.php进行处理。 } </script> </head> <body> <form method="post" name="reg" id="reg" action="checkuserreg.php"> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td class="td1">登陆帐号:</td> <td> <input name="username" type="text" id="username" size="20" maxlength="20" class="textipt"/> <span id="check" class="msg">4-16个字符,英文小写、汉字、数字。</span></td> </tr> <tr> <td class="td1">登录密码:</td> <td><input name="userpwd" type="password" id="userpwd" size="30" maxlength="30" class="textipt"/> <span class="msg" id="pwd">密码字母有大小写之分,英文、数字。</span></td> </tr> <tr> <td class="td1">确认密码:</td> <td><input name="reuserpwd" type="password" id="reuserpwd" size="30" maxlength="30" class="textipt"/> <span class="msg" id="repwd">请再次输入登录密码。</span></td> </tr> <tr> <td colspan="2" align="left" valign="middle" height="50"> <input name="submit" type="image" src="img/reg_but1.jpg" /></td> </tr> </table> </form> </body> </html> ajaxreg .js代码(AJAX脚本及实时验证的JS脚本) 复制PHP内容到剪贴板 PHP代码: 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("创建XMLHttp对象失败!"); 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){//信息已成功返回,开始处理信息 document.getElementById(reobj).innerHTML=http_request.responseText; } else{//页面不正常 alert("您所请求的页面不正常!"); } } } function usercheck(obj){ var f=document.reg; var username=f.username.value; if(username==""){ document.getElementById(obj).innerHTML=" <font color=red>用户名不能为空!</font>"; f.username.focus(); return false; } else{ document.getElementById(obj).innerHTML="正在读取数据..."; send_request('checkuserreg.php?username='+username); reobj=obj; } } function pwdcheck(obj){ var f=document.reg; var pwd=f.userpwd.value; if(pwd==""){ document.getElementById(obj).innerHTML=" <font color=red>用户密码不能为空!</font>"; //f.userpwd.focus(); return false; } else if(f.userpwd.value.length<6){ document.getElementById(obj).innerHTML=" <font color=red>密码长度不能小于6位!</font>"; //f.userpwd.focus(); return false; } else{ document.getElementById(obj).innerHTML=" <font color=red>密码符合要求!</font>"; } } function pwdrecheck(obj){ var f=document.reg; var repwd=f.reuserpwd.value; if (repwd==""){ document.getElementById(obj).innerHTML=" <font color=red>请再输入一次密码!</font>"; //f.reuserpwd.focus(); return false; } else if(f.userpwd.value!=f.reuserpwd.value){ document.getElementById(obj).innerHTML=" <font color=red>两次输入的密码不一致!</font>"; // f.reuserpwd.focus(); return false; } else{ document.getElementById(obj).innerHTML=" <font color=red>密码输入正确!</font>"; } } checkuserreg .php代码:(连接数据库并检测用户名是否已注册的页面) 复制PHP内容到剪贴板 PHP代码: <?php header("Content-type: text/html;charset=utf-8"); require_once('config.php'); //包含连接MYSQL数据库的代码(省略) $username=trim($_GET['username']);//获取注册名 $sql=mysql_query("select * from jk_users where username='".$username."'"); $info=mysql_fetch_array($sql); if($info==true){ echo" <font color=red>The number is registed</font>"; }else{ echo" <font color=red>恭喜,此用户名可以注册!</font>"; } ....(一切验证通过后,进行POST数据处理,代码省略) ?> 刚才又写了个E-mail验证,加到AJAXREG.JS里,然后把注册页面EMAIL这里改写如下:复制PHP内容到剪贴板PHP代码: <td class="td1">电子邮箱:</td> <td><input name="email" type="text" id="email" size="30"maxlength="30" class="textipt"/> <span class="msg"id="em">请输入您的E-mail,将用于密码找回。</span></td> 再在checkuserreg.php里添加:复制PHP内容到剪贴板PHP代码: if(isset($_GET['email'])){ $email=trim($_GET['email']);//获取输入的邮箱地址 $sql=mysql_query("select * from jk_users where email='".$email."'"); $info=mysql_fetch_array($sql); if($info==true){ echo" <font color=red>对不起,该邮箱已在本站注册过。</font>"; }else{ echo" <font color=red>邮箱输入正确!</font>"; } } 就OK了,可以验证E-MAIL是否注册过。复制PHP内容到剪贴板PHP代码: function emailcheck(obj){ var f=document.reg; var email=f.email.value; if(email.length>0){ var Expression=/^w+((-w+)|(.w+))*@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/ var regExp=new RegExp(Expression); if(regExp.test(email)==false){ document.getElementById(obj).innerHTML=" <font color=red>邮箱格式不正确,请认真填写!</font>"; f.email.focus(); return false; }else{ document.getElementById(obj).innerHTML="正在读取数据..."; send_request('checkuserreg.php?email='+email); reobj=obj; } }else{ document.getElementById(obj).innerHTML=" <font color=red>请输入您的E-mail地址!</font>"; return false; } } |