jquery 实现用户名检测实例

/*
*需要通过JAVASCRIPT做两件事情
*1.button按下的时候，需要将文本中的数据获取到，然后发送给服务器端，
*最后接收服务器返回的数据，填充到我们预留的DIV中去这样可以看到结果。
*2.文本框上，用户按键之后，需要判断文本框的内容是否为null，
*如果不时null红色的边框和背景图片就应该取消，否则保留。
*/
/*
*需要在页面装载完成时注册上这些工作
*/
$(document).ready(function(){
//这些内容是装在完成过后要执行的
var userNameNode = $("#userName");
//需要找到button按钮，注册事件。
$("#verifyButton").click(function(){
   //1.获取文本框内容
   var userName = userNameNode.val();
   //2.将这个内容发送给服务器端
   if(userName == ""){
    alert("用户名不能为空！");
   }else{
    $.get("http://localhost/MyBlog/index.php?userName=" + userName,null,function(response){
     //3.接受服务器端返回的数据，填充在DIV中
     $("#result").html(response);
    });
   }
});
//需要找到文本框，注册事件。
userNameNode.keyup(function(){
//获取当前文本框的内容
var value = userNameNode.val();
if(value == ""){
   //让边框变成红色
   userNameNode.addClass("userText");
}else{
   //否则去掉边框颜色
   userNameNode.removeClass("userText");
}
});
});