您的位置：首页 > 其它

Ajax验证用户名是否存在

2008-12-30 08:36 323 查看

在注册的时候,常会进行用户名验证,如果输入的用户名已经存在,立刻给出提示而不是等信息填写完后进行验证,如果输入信息很多的话,不仅信息会丢失,并且会进行一次回传,很恼火,那么注册的时候使用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" 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();

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航