您的位置：首页 > 编程语言 > ASP

在asp.net中基于Ajax的数据验证

2006-05-10 16:42 507 查看

很多网站都使用了ajax技术进行数据验证，如淘宝网站。那么我们如果使用ASP.NET怎样实现这样的效果呢？

效果图：
1、在用户名框输入An两个字符，系统立刻无刷新响应错误提示，请看红色文字；

2、当我接着输入“dy”以完成用户名“Andy”的输入，系统立刻无刷新响应提示，系统进行了与数据库校验，发现用户名不存在，无刷新显示提示；

3、当我改为用户名“Nic”输入时，系统无刷新的提示“用户名存在”，也进行了与数据库的通讯；

实现代码：
aspx代码如下：

<%

@ Page Language="C#" AutoEventWireup="true" CodeFile="Verify.aspx.cs" Inherits="Verify" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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;

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>

}

//加上[AjaxPro.AjaxMethod]，才能被客户端访问

[AjaxPro.AjaxMethod]

public string GetReturnCode(string strUsername)

{

if (!IsValidUsername(strUsername))

{

return "1";

}

else if (!IsUsernameExist(strUsername))

{

return "2";

}

else

{

return "0";

}

}

private bool IsUsernameExist(string strUsername)

{

bool bRet = false;

switch (strUsername.ToLower())

{

case "test":

case "tom":

case "jack":

case "ajax":

case "aspnet":

case "nic":

bRet = true;

break;

}

return bRet;

}

private bool IsValidUsername(string strUsername)

{

return (Regex.IsMatch(strUsername, @"^(/w{3,15})$"));

}

private bool IsValidEmail(string strEmail)

{

return (Regex.IsMatch(strEmail, @"^/w+((-/w+)|(/./w+))*/@[A-Za-z0-9]+((/.|-)[A-Za-z0-9]+)*/.[A-Za-z0-9]+$"));

}

}

说明：我这里使用了ajaxpro.net库进行开发，大家可以在网络上找找最新版的ajaxpro.net库，下载后在项目里引用就可以了！

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

标签：

相关文章推荐

新的分享

章节导航