我的博客| Blog
- ·微信小程序错误:VM564:...
- ·mongodb3.2设置密码...
- ·单行滚动代码-单行滚动效果
- ·自己动手制作图形字体,以便于...
- ·MySQL无限级分类PHP按...
- ·Windows下的Apach...
- ·如何将网站上的文章分享到微信...
- ·PHP实现自动获取本月第几个...
联系我| Contact Me
- 电话:18681257080
- QQ:271538869
- 邮编:518020
- 信箱:service@08321.org
- 地址:四川省内江市资中县
诚信稳健,和谐共赢
- 以诚信为立世之本,在稳健的基础上,不断寻求创新与突破。
- 以务实严谨、精微细致的专业精神,为客户做最优质的策划,实现效果最大化。
成功,依稀可见
- 成功,依稀可见!——依希设计
- 成功是很多方面的,很多小的成功可以积累成大的成功,而真正意义上的成功是永远不可能到达的,所以只能依稀可见。
我的博客
网页制作小技巧——AJAX、客户端验证、刷新验证码
来源:本站编辑 发布日期:2010-2-23 已有 人浏览过此信息
网页制作小技巧——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>
[完结]
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>
[完结]
上一条:设计技巧:一图多用使设计更完美
