验证用户名是否存在-CFANZ编程社区

在注册的时候,常会进行用户名验证,如果输入的用户名已经存在,立刻给出提示而不是等信息填写完后进行验证,如果输入信息很多的话,不仅信息会丢失,并且会进行一次回传,很恼火,那么注册的时候使用Ajax验证一下,就可以避免这些问题了,下面给出最简单的使用示例,判断用户名是否存在:

 第一种:最原始的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" οnblur="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();
}