在asp.net中基于Ajax的数据验证
在asp.net中基于Ajax的数据验证
很多网站都使用了ajax技术进行数据验证,如淘宝网站。那么我们如果使用ASP.NET怎样实现这样的效果呢?
效果图:
1、在用户名框输入An两个字符,系统立刻无刷新响应错误提示,请看红色文字;
![](/images/cnblogs_com/nicnet/1.GIF)
2、当我接着输入“dy”以完成用户名“Andy”的输入,系统立刻无刷新响应提示,系统进行了与数据库校验,发现用户名不存在,无刷新显示提示;
![](/images/cnblogs_com/nicnet/2.GIF)
3、当我改为用户名“Nic”输入时,系统无刷新的提示“用户名存在”,也进行了与数据库的通讯;
![](/images/cnblogs_com/nicnet/3.GIF)
实现代码:
aspx代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Verify.aspx.cs" Inherits="Verify" %>
![](/Images/OutliningIndicators/None.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
![](/Images/OutliningIndicators/None.gif)
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Verify</title>
<script language="jscript">
function VerifyUsername(name)
{
Verify.GetReturnCode(name,IsUsernameExist_callback);
}
function IsUsernameExist_callback(res)
{
var msg = document.getElementById("lblMessage");
var bRet = res.value;
if(bRet == "0")
{
msg.innerHTML = "用户名存在!";
msg.style.color = "green";
}
else if(bRet == "1")
{
msg.innerHTML = "用户名长度必须在3到15之间,且不包含字母、数字和下划线以外的字符!";
msg.style.color = "red";
}
else
{
msg.innerHTML = "用户名不存在!";
msg.style.color = "red";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>基于Ajax的数据验证</h1>
<hr />
<asp:Label ID="Label1" runat="server">用户名:</asp:Label>
<input type="text" id="tbUsername" onkeyup="VerifyUsername(this.value)" /><br />
<asp:Label ID="lblMessage" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
后台C#代码:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Text.RegularExpressions;
![](/Images/OutliningIndicators/None.gif)
public partial class Verify : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(Verify));
//作用是向客户端输出下面的代码:
//<script type="text/javascript" src="/ajaxprotest/ajaxpro/prototype.ashx"></script>
//<script type="text/javascript" src="/ajaxprotest/ajaxpro/core.ashx"></script>
//<script type="text/javascript" src="/ajaxprotest/ajaxpro/converter.ashx"></script>
//<script type="text/javascript" src="/ajaxprotest/ajaxpro/Verify,App_Web_elgsobcn.ashx"></script>
}
![](/Images/OutliningIndicators/None.gif)
//加上[AjaxPro.AjaxMethod],才能被客户端访问
[AjaxPro.AjaxMethod]
public string GetReturnCode(string strUsername)
{
if (!IsValidUsername(strUsername))
{
return "1";
}
else if (!IsUsernameExist(strUsername))
{
return "2";
}
else
{
return "0";
}
}
![](/Images/OutliningIndicators/None.gif)
private bool IsUsernameExist(string strUsername)
{
bool bRet = false;
![](/Images/OutliningIndicators/None.gif)
switch (strUsername.ToLower())
{
case "test":
case "tom":
case "jack":
case "ajax":
case "aspnet":
case "nic":
bRet = true;
break;
}
![](/Images/OutliningIndicators/None.gif)
return bRet;
}
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
private bool IsValidUsername(string strUsername)
{
return (Regex.IsMatch(strUsername, @"^(\w{3,15})$"));
}
![](/Images/OutliningIndicators/None.gif)
private bool IsValidEmail(string strEmail)
{
return (Regex.IsMatch(strEmail, @"^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$"));
}
![](/Images/OutliningIndicators/None.gif)
}
说明:我这里使用了ajaxpro.net库进行开发,大家可以在网络上找找最新版的ajaxpro.net库,下载后在项目里引用就可以了!
很多网站都使用了ajax技术进行数据验证,如淘宝网站。那么我们如果使用ASP.NET怎样实现这样的效果呢?
效果图:
1、在用户名框输入An两个字符,系统立刻无刷新响应错误提示,请看红色文字;
2、当我接着输入“dy”以完成用户名“Andy”的输入,系统立刻无刷新响应提示,系统进行了与数据库校验,发现用户名不存在,无刷新显示提示;
3、当我改为用户名“Nic”输入时,系统无刷新的提示“用户名存在”,也进行了与数据库的通讯;
实现代码:
aspx代码如下:
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
后台C#代码:
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
说明:我这里使用了ajaxpro.net库进行开发,大家可以在网络上找找最新版的ajaxpro.net库,下载后在项目里引用就可以了!