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

把以下代码保存到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>



  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值