主题: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]