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