回 帖 发 新 帖 刷新版面

主题:Ajax应用之用户名验证


 
前几天网站技术讨论群(3316653)里有人问我一个关于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)
{

}

这一段就是最重要的了,因为我们在这里将要判断用户名是否已经被注册了
至于这个GetResult究竟是怎么样来实现无刷新验证的?
欲知详情,到我的个人主页去看,地址:http://www.gu916.cn/newsxx.asp?ID=36 
[url=http://www.gu916.cn/newsxx.asp?ID=36]http://www.gu916.cn/newsxx.asp?ID=36[/url]

回复列表 (共3个回复)

沙发

哈哈,这个功能不错啊,顶以个




[url=http://zhao.keeyaa.cn/PJblog2q/article.asp?id=2]asp技术网[/url]

板凳

mark

3 楼

虽然以前看过类似,不过还是mark一下

我来回复

您尚未登录,请登录后再回复。点此登录或注册