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" οnfοcus="checkName();" οnblur="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;
??????????? }
??????? }

?

轉載于:https://www.cnblogs.com/liufei88866/archive/2009/11/10/1599883.html

總結

以上是生活随笔為你收集整理的AJAX+JavaScript无刷新检查用户名的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。