首頁 > 開發者 > Ajax

Ajax驗證使用者名稱是否存在

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在註冊的時候,常會進行使用者名稱驗證,如果輸入的使用者名稱已經存在,立刻給出提示而不是等資訊填寫完後進行驗證,如果輸入資訊很多的話,不僅資訊會丟失,並且會進行一次回傳,很惱火,那麼註冊的時候使用Ajax驗證一下,就可以避免這些問題了,下面給出最簡單的使用樣本,判斷使用者名稱是否存在:

轉自：http://www.cnblogs.com/huazai/archive/2008/11/25/1340911.html

 第一種:最原始的JS驗證

 HMTL代碼:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title></title>
    <script language="javascript" type="text/javascript" src="CheckUserName.js"></script>
    <script language="javascript">
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td>Ajax Example:</td>
        </tr>
        <tr>
            <td>
                <table cellpadding="0" cellspacing="0" width="100%">
                  <tr>
                    <td>Example 1:Check UserName IsExists</td>
                  </tr>
                  <tr>
                    <td>
                        <asp:Label ID="lblUserName" runat="server" Text="使用者名稱："></asp:Label>
                        <input id="txtUserName" type="text" onblur="onBlur()"/>
                    </td>
                  </tr>
                </table>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

 

//CheckUserName.js

var ajax = function(option)
{
    var request;
    var createRequest = function()
    {
        var request;
        if (window.XMLHttpRequest)
        {
            request = new XMLHttpRequest();
        }
        else
        {
            try
            {
                request = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e)
            {
                request = new ActiveXObject("Msxml2.XMLHTTP");
            }
        }
        return request;
    }

    var sendRequest = function()
    {
        request = createRequest();
//        request.open("post", option.url, true);
//        request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//        request.onreadystatechange = ResponseRequest;
//        request.send(option.param);
        request.open("get", option.url+"?t=0", true);
        request.onreadystatechange = ResponseRequest;
        request.send(null);   
    }

    var ResponseRequest = function()
    {
        if (request.readyState == 4)
        {
            if (request.status == 200)
            {
                option.Success(request);
            }
            else
            {
                option.Failure(request);
            }
        }
    }
    sendRequest();
}

var onBlur = function()
{
    var option = { url: "Test.aspx", param: "t=1", Success:function(request){alert(request.responseText);}, Faitrue: function(request) { alert(false) } };
    new ajax(option);
}

 

//Test.aspx

protected void Page_Load(object sender, EventArgs e)
 {
            if (Request["t"] != null)
            {
                this.Response.Clear();
                string t = Request["t"].ToString();
                if (t == "1")
                {
                    Response.Write("使用者名稱已存在，請填寫其他的使用者名稱!");
                }
                else if (t == "0")
                {
                    Response.Write("該使用者名稱沒被註冊，可以使用!");
                }
                this.Response.End();
            }
 }

 

 第二種方式:利用JQuery架構ajax驗證

 HMTL代碼:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {
        $("#Button1").click(function() {
                $.ajax({
                    type: "get",
                    url: "ResponsePage.aspx?t=0",
                    dataType: 'html',
                    success: function(data) {
                        alert("post " + data);
                    },
                    error: function() { alert('error!'); }
                });
            });
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="Button1" type="button" value="顯示" />
    </div>
    </form>
</body>
</html>

//ResponsePage.apsx

protected void Page_Load(object sender, EventArgs e)
{
            this.Response.Clear();
            string t = Request["t"].ToString();
            if (t == "1")
            {
                Response.Write("使用者名稱已存在，請填寫其他的使用者名稱!");
            }
            else if (t == "0")
            {
                Response.Write("該使用者名稱沒被註冊，可以使用!");
            }
            this.Response.End();
}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout ajax controls
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More