【转载】Ajax应用之用户名验证

首先我们来创建一个文本框来输入用户名

 

< input  name ="username"  type ="text"  class ="register"  id ="username"  onBlur ="chuser();"  tabindex  ="1"  size ="14"  maxlength ="20"  check =".{2,20}."  warning ="用户名在6-20字符之间"   />< div  id ="loginid_info" ></ div >

定义了当焦点移开的时候调用chuser函数

在后面定义了一个DIV层,名字叫loginid_info

下面来写chuser函数

 

function  chuser() ... {

  var username=document.getElementById("username");
   if(username.value=='')
   ...{
    document.getElementById("loginid_info").className = 'STYLE1';
    document.getElementById("loginid_info").innerHTML = '用户名不能为空。'
    return false;
   }
   else if(username.value.length<2 || username.value.length>16)
   ...{
    document.getElementById("loginid_info").className = 'STYLE1';
    document.getElementById("loginid_info").innerHTML = '用户名必须为2-16位。'
    return false;
   }
   //var filter=/^s*[.A-Za-z0-9_-]{2,16}s*$/;
   //if (!filter.test(username.value)) { 
    //document.getElementById("loginid_info").background='#BFDFFF'
    //document.getElementById("loginid_info").innerHTML = '用户名必须由数字,英文或下划线组成。'
    //return false; 

   //{
   //document.getElementById("loginid_info").innerHTML = '<font color=#red>用户名必须由数字,英文或下划线组成。</font>'
   // return false;
   //}
    else...{
    GetResult(username.value)
    document.getElementById("loginid_info").className = 'STYLE2';
    //document.getElementById("loginid_info").innerHTML = '<font color=#0066ee>填写正确。</font>'
   }
}

 

这一段是很简单的JS验证,只有最后那个GetResult(username.value)才是我们需要的AJAX

我们将文本框中的值作为参数传递到getresult中

 

function  GetResult(username)
... {
var oBao = new ActiveXObject("Microsoft.XMLHTTP");
var my_url="ch.asp?username="+ escape(username);
oBao.open("POST",my_url,false);
oBao.send(null);
var strResult = unescape(oBao.responseText);
document.getElementById("loginid_info").innerHTML = strResult;
}

 

这一段就是最重要的了

定义了将username的值传递到ch.asp页面

然后返回unescape(oBao.responseText);TEXT文本值

最后再输出到层loginid_info

接下来我们看看ch.asp其实就是很简单的ASP脚本验证

ch.asp

 

<!-- #include file="conn.asp" -->
<% ...
username=request("username")
sql="select * from user where uname='"&username&"'"
set rs=server.createobject("ADODB.Recordset")
rs.open sql,conn,1,1
if not rs.eof then
response.Write "<font color=red>×用户名已存在,请重新选择一个用户名</font>"
else
response.Write "<font color=#00ff00>√此用户名可以注册</font>"
end if
rs.Close()
%>

 

输出的值将被返回给getresult

在这里要将ch.asp用文本打开另存为utf-8格式,否则返回用AJAX输出的时候会出现乱码