AJAX+JavaScript無重新整理檢查使用者名稱

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)
                {
                    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;
            }
        }