PHP+Ajax实现用户注册的界面

来源：互联网发布：小学体育课程优化整合编辑：程序博客网时间：2024/05/16 17:51

把以下代码保存到ajax1.php和ajax.html文件中。浏览ajax.html文件。

ajax1.php>>>>>>>>

<?PHP if(isset($_POST['id'])) { $id=$_POST['id']; if(strlen($id)<6) { echo "<li>用户名长度小于6</li>"; } else if(!ereg("^[a-z][a-zA-Z0-9_]{5,16}",$id)) { echo "<li>用户名不合要求</li>"; } else { echo "<li>用户名合法</li>"; } } if(isset($_POST['password'])) { $pswd=$_POST['password']; if(strlen($pswd)<6) { echo "<li>密码长度小于6</li>"; } else { if(!ereg("^[a-zA-Z0-9_]{6,16}",$pswd)) { echo "<li>密码不合要求</li>"; } else { echo "<li>密码合法</li>"; } } } if(isset($_POST['passwordagain'])) { $pswda=$_POST['passwordagain']; if($pswda!=$pswd) echo "<li>两次密码不一致</li>"; else echo "<li>密码验证成功</li>"; } if($_POST['submit']) { $id=$_POST['id']; $pswd=$_POST['password']; $pswda=$_POST['passwordagain']; echo "<li>表单验证</li>"; } ?>

ajax.html>>>>>>>>>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT="www.phpxuexi.cn"><META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""><script language="javascript">  if(window.ActiveXObject) //如果是window声明一个函数   {   function XMLHttpRequest() //这个函数firefox已带不用声明   {   try  {     //返回对象句柄     return new ActiveXObject("MSXML2.XMLHTTP");     return new ActiveXObject("Microsoft.XMLHTTP");   }   catch (err)  {     alert("XMLHttpRequest error");   }   }   }   function ajax(reqtype,url,asynch,respHandle) //声明一个ajax函数这个是ajax入口  {   $ajax=new XMLHttpRequest(); //new 一个xmlhttp 注意这个函数 还有前要不要带var 表示全局变量   if($ajax) //检查下是否new 成功   { //查看下是什么类型提交   if(reqtype.toLowerCase()!='post')  {     initReq(reqtype,url,asynch,respHandle); //调用一个初始化函数   }  else   {     var args=arguments[4]; //如果是post应该还要取一个参数     if(args!=null&&args.length>0)     {     initReq(reqtype,url,asynch,respHandle,args); //调用一个初始化函数     }   }   }  else   {   alert('ajax new error');   }   }   function initReq(reqType,url,bool,respHandle)  {   try  {   $ajax.onreadystatechange=respHandle; //设置如果提交成功调用那个函数 注意这个是变量   $ajax.open(reqType,url,bool); //打开地址   if(reqType.toLowerCase()=="post")  { //如果是post 还要发送类型     $ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");     $ajax.send(arguments[4]); //发送post数据   }  else   {     $ajax.send(null); //如果是get就不用了   }   }   catch(errv)   {   alert('the server at the monent');   }   }   function handleResponse()  {   if($ajax.readyState==4)  { //检查状态是否成功请求   if($ajax.status==200)  { //返回是否正确完整     //alert($ajax.responseText);//可以测试下数据     document.getElementById("sendit").innerHTML=$ajax.responseText;   }  else  {     alert("$alax error");   }   }   }  function send_id()   {  //组装下数据   var _url="ajax1.php";   var _data="id="+document.getElementById("id").value;   ajax("POST",_url,true,handleResponse,_data);   }  function send_password()   {   //组装下数据   var _url="ajax1.php";   var _data="id="+document.getElementById("id").value+"password="+document.getElementById("password").value;   ajax("POST",_url,true,handleResponse,_data);   }   function send_passwordagain()   {   //组装下数据   var _url="ajax1.php";   var _data="id="+document.getElementById("id").value+"password="+document.getElementById("password").value+"&passwordagain="+document.getElementById("passwordagain").value;   ajax("POST",_url,true,handleResponse,_data);   }  function submit_form()  {  var _url="ajax1.php";  var _data="id="+document.getElementById("id").value+"&password="+document.getElementById("password").value+"&passwordagain="+document.getElementById("passwordagain").value+"submit=1";  ajax("POST",_url,true,handleResponse,_data);  }</script> <style type="text/css"><!--body {  margin:0 0 0 0;  padding:0 0 0 0;  background:#ffffff;  font-family:Verdana, Arial, Helvetica, sans-serif;  font-size:9pt;  color:#000000;}#register {  margin:10% 0 10% 10%;  width:400px;} #left {  float:left;  width:100px;  }-->#sendit  {  font-size:12px;  color:#FF00FF;  }td{font-size:14px;color:#0077FF;}</style></HEAD><BODY><div align="center">  <div id="register">  <form>    <table width="473">  <tr>    <td>帐号：</td><td width="170"><input type="text" name="id" id="id" onChange="send_id();"/></td><td width="200" rowspan="4" valign="top"><div id="sendit"></div></td>  </tr>  <tr>    <td>密码：</td><td><input type="password" name="password" id="password" onChange="send_password();"/></td>  </tr>  <tr>    <td width="87">重复密码：</td>    <td><input type="text" name="passwordagain" id="passwordagain" onChange="send_passwordagain();"></td>  </tr>  <tr>     <td> </td>    <td align="right"><input name="button" type="button" onClick="submit_form();" value="注册"/><input type="reset" value="重置">    </td>  </tr>    </table>  </form></div></div></BODY></HTML>