登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

面包会有的

... ...

 
 
 

日志

 
 

张:动态检测用户名是否可用  

2008-07-10 19:58:46|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |


当用户注册时,需要拟定并输入一个用户名,而这个用户名,很多时候会互相重复,所以,常见的情况是,在输入

框旁边放一个按钮“检测用户名”,当用户点击时,提交到CheckUserName.asp进行检查,而很多时候,甚至不放这个按钮,而当用户提交时,才会发现用户名重复,这将导致几种恶性情况。

 

一种情况是,用history.go(-1)倒退一步,一般性的文本输入还在,密码必须重新输入。还有某些下拉菜单需要重新选择(不是所有的下拉菜单)。

还有一种情况,就是用户输入的所有数据全部丢失,可以想像,进行二次输入的人会有几个呢?

所以,很多时候,为了避免重复现象,往往把发布信息分成几步,第一步只要求输入用户名和密码,这样即使重复,也只需要这几个输入框重输(username,password1,password2),不过,这样做是一种权宜之计。对于一个完美的方案来说,并不是最好的选择。

 

所以,如果在用户输入的时候,即时进行检测,即时告知用户这个用户名是否已被占用,这将是非常人性化的设计。

本文后面将给出这样的方案,本示例已经过本人的测试,完全可用,如果将这种方法用在其它一些方面,将极大的提高网站的优越性,比如,用户输入的过程中即时保存信息,或即时查询,比如google在你输入关键字时,会动态地给出一些类似的关键字供选择。

还有就是163博客的编辑过程中保存草稿。所以,这个示例的应用非常多,办法很简单,就看怎么用了。

ajax.js

var xmlHttp
function inputarray(str) {
if (str.length >0)
{ var url="checkusername.asp?username=" + str
xmlHttp=GetXmlHttpObject(stateChanged)
xmlHttp.open("GET", url , true)

xmlHttp.send(null)
}
else
{
document.getElementById("arrayform").innerHTML=""
}
}

function stateChanged()
{
if (xmlHttp.readyState<4)
{document.getElementById("arrayform").innerHTML="loading..." }
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("arrayform").innerHTML=unescape(xmlHttp.responseText)
}
}

var set
function modf(str) {
if (str.length >0)
{ var url="modarray.asp?id=" + str
set=GetXmlHttpObject(stateChanged2)
set.open("GET", url , true)

set.send(null)
}
else
{
document.getElementById("modorm").innerHTML=""
}
}

function stateChanged2()
{
if (set.readyState<4)
{document.getElementById("modorm").innerHTML="正在查询..." }
if (set.readyState==4 || set.readyState=="complete")
{
document.getElementById("modorm").innerHTML=set.responseText
}
}

//2
var xmlcheck
function checkuser(str1,str2,str3) {
if (str1.length >0&&str2.length >0)
{ var url="chklogin.asp?username=" + str1 + "&password="+ str2 +"&logincookie="+str3
xmlcheck=GetXmlHttpObject(stateChanged3)
xmlcheck.open("GET", url , true)

xmlcheck.send(null)
}
else
{
document.getElementById("err").innerHTML=""
}
}

function stateChanged3()
{
if (xmlcheck.readyState<4)
{document.getElementById("err").innerHTML="正在登陆..." }
if (xmlcheck.readyState==4 || xmlcheck.readyState=="complete")
{
document.getElementById("err").innerHTML=xmlcheck.responseText
if(xmlcheck.responseText=="logined")
{location.href="main.asp"}
}
}


//common
function GetXmlHttpObject(handler)
{
var objXmlHttp=null

if (navigator.userAgent.indexOf("Opera")>=0)
{
alert("This doesn't work in Opera")
return;
}
if (navigator.userAgent.indexOf("MSIE")>=0)
{
var strName="Msxml2.XMLHTTP"
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.XMLHTTP"

}
try
{
objXmlHttp=new ActiveXObject(strName)
objXmlHttp.onreadystatechange=handler
return objXmlHttp
}
catch(e)
{
alert("Error. Scripting for ActiveX might be disabled")
return
}
}
if (navigator.userAgent.indexOf("Mozilla")>=0)
{
objXmlHttp=new XMLHttpRequest()
objXmlHttp.onload=handler
objXmlHttp.onerror=handler
return objXmlHttp
}
}

CheckUserName.asp
<!-- #include file="conn.asp" -->

<%
username=request("username")
Sql = "Select * From Users Where UserName = '"& UserName &"'"
Set Rs = Server.CreateObject("Adodb.Recordset")
Set Rs = Conn.Execute(Sql)

Response.Charset="gb2312"
If Not Rs.Bof Then

 Response.Write "用户名已被占用,请更换"
Else
 Response.Write "用户名可用"

End If
%>

=====================================
Conn.asp

=====================================
<%
  Set Conn = Server.CreateObject("ADODB.Connection")
  Conn.Open "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" & Server.MapPath("db1.mdb")
%>

==============================================
1.asp
==============================================


<!-- #include file="conn.asp" -->
<%
Response.Charset="gb2312"
%>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<title>动态检测用户名</title>
<script src="ajax.js" language="javascript"></script>
</head>
<body>
<div style="border:1px solid #333; background:#f3f3f3;padding:5px;">
<form>

请输入用户名 : <input type="text" id="txt1" name="txt1" onKeyUp="inputarray(this.value)">
</form>
<p><div id="arrayform">....</div></p>
</div>
<br />

<div id="modorm"></div>


</table>
</body>
</html>

==========================================

db1.mdb

==========================================

数据结构:

Users表
字段:Id,UserName
在Users表中,增加一些记录,如111111,222222,333333,444444,1,2,3,4,5,6,a,b,c,d,e,f
输入的时候,注意在输入111111时的提示变化。截图就不给了,如果需要完整的源码,请联系我吧。






















  评论这张
 
阅读(1010)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018