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