吴伟贤のBlog

AJAX+JavaScript无刷新检查用户名是否可用2009-04-20 16:26   JavaScript 和 Ajax 代码
<script language="javascript" type="text/javascript">
var xmlHttp = null;
        function createXMLHttp()
        {
            if(window.ActiveXObject)
                {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
            else if(window.XMLHttpRequest)
                {
                    xmlHttp = new XMLHttpRequest();
                }
        }
        function checka()
        {
            createXMLHttp();              
            var txtName=document.getElementById("txt_name"); // 获取输入用户名控件
            var labName=document.getElementById("lab_name"); // 显示提示信息的控件
   // 判断用户名格式和长度(只能是数字和字母组合)
   // 错误情况一
                if(!txtName.value.match(/^[a-zA-Z0-9]+$/) && txtName.value.length < 5 || txtName.value.length >16)
                    {  
                      labName.style.color="#cc0000";
                      labName.value="请输入6-12位用户名，只能由数字字母组合。";
                      return false;
                        }else
    // 正确
                      if(txtName.value.length > 5 && txtName.value.length <17 && txtName.value.match(/^[a-zA-Z0-9]+$/))
                      {               
                            labName.style.color="#0000ff";
                            var url = "CheckName.aspx?userName="+txtName.value;
                            xmlHttp.open("post",url,true);
                            xmlHttp.onreadystatechange = sub;
                            xmlHttp.send(null);
                      }
    // 错误情况二
    else
                      {
                        labName.style.color="#cc0000";
                        labName.value="请输入6-12位用户名，只能由数字字母组合。";   
                        return false;       
                      }
        }
        function sub()
        {
            if(xmlHttp.readyState==4)
            {
                if(xmlHttp.status==200)
                {
                    document.getElementById("lab_name").value=xmlHttp.responseText;
                }
            }
        }

</script>

HTML 页面控件以及方法调用
// onfocus 获取到光标事件 onblur 光标离开时候事件
<asp:TextBox ID="txt_name" runat="server" CssClass="t_txt" onfocus="checkName();" onblur="checka();"></asp:TextBox>
// 我用的 TextBox ，兼容 IE 和 Firefox 样式
<asp:TextBox ID="lab_name" runat="server" Width="300px" style="border-top-style:none; border-width:0px; border-left-style:none; border-bottom-style:none; border-right-style:none;" ReadOnly="true"></asp:TextBox>

新建一张页面具体数据操作

SQL 连接以及语句略……

新页面 方法
protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                if (CheckNames(Request.QueryString["userName"]) == true)
       &#
160;        {
                    Response.Write("对不起，该用户名已被占用！");
                }
                else
                {
                    Response.Write("恭喜,该用户名可以使用！");
                }
            }

        }

private bool CheckNames(string userName)
        {
            // 创建一个数据集
            DataSet ds = new DataSet();
            // 实例化模型层
            ZYB_UserLogin uiModel = new ZYB_UserLogin();
            // 封装数据
            uiModel.UNL_UserLoginName = userName;
            // 实例化业务层
            UserLoginBLL uiBll = new UserLoginBLL();
            try
            {
                // 调用业务层的检查用户名方法
                ds = uiBll.SelectNameCheck(uiModel);
                // 判断是否有数据
                if (ds.Tables[0].Rows.Count < 1)
                {
                    // 没有代表可用                                      
                    return false;
                }
                else
                {
                    // 不可用                   
                    return true;
                }
            }
            catch (Exception ex)
            {
                // 抛出异常
                throw ex;
            }
        }