网页制作小技巧——AJAX、客户端验证、刷新验证码

1、Ajax应用——验证用户名是否存在
<script type="text/javascript">
function ajaxFunction(){
var xmlHttp;
try{xmlHttp=new XMLHttpRequest();} //Firefox Opera Safari 等浏览器声明对象
catch (e){try{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");} //IE浏览器声明对象
catch (e){try{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");} //IE浏览器声明对象
catch (e){alert("您的浏览器不支持AJAX！");return false;}
}
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4) //xmlHttp.readyState=4 返回状态，4表示成功返回
{//返回值存放在 xmlHttp.responseText 属性中. 以下是返回后的相关处理
var exist=document.getElementById("exist");
var notexist=document.getElementById("notexist");
if (xmlHttp.responseText==1){exist.style.display='inline';notexist.style.display='none';}
else{exist.style.display='none';notexist.style.display='inline';}
}
}
xmlHttp.open("GET","api.php?act=checkname&uname="+document.regform.uname.value,true); //发送到目标PHP程序处理
xmlHttp.send(null);
}
</script>
/* 函数调用 */
用户名：<input type="text" name="uname" size="30" onblur="ajaxFunction();"/> <span class='ps'>*</span> <span id="exist" style='display:none;'>用户名已存在</span> <span id="notexist" style='display:none;'>恭喜您，可以注册此用户</span>

2、客户端验证
<form action="user.php?act=savereg" method="post" onsubmit="return chkform();" name="regform">
用户名：<input type="text" name="uname" size="30"/>
密　码：<input type="password" name="pass" size="25"/>
Email：<input type="text" name="email" size="40"/>
</form>
<script type="text/javascript">
function chkform(){
var regform=document.regform;
if (regform.uname.value.length<2){alert('用户名至少需要两个字');return false;}
if (regform.pass.value.length<6){alert('密码不能小于6位');return false;}
//email格式验证
if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(regform.email.value)){alert('电子信箱格式不规范');return false;}
alert("通过了")
return false;
}
</script>

3、验证码看不清楚，换一张
/* getcode.php 是验证码生成文件 */
验证码：<input type="text" name="vcode" size="5"/> <img src="getcode.php" alt="" id="verify"/> <a href="#" onclick="javascript:return chgvcode();">看不清，换一个</a>
<script type="text/javascript">
function chgvcode()
{
var obj=document.getElementById("verify");
obj.src=obj.src+"?rnd=2";
return false;
}
</script>

[完结]