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

最新推荐文章于 2021-08-05 16:13:05 发布

转载最新推荐文章于 2021-08-05 16:13:05 发布 · 1k 阅读

文章标签：

#asp.net #ajax #callback #server #asp #function

本文介绍如何使用ASP.NET结合AjaxPro.NET库实现实时用户名验证功能，包括前端页面设计及后端验证逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很多网站都使用了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库，下载后在项目里引用就可以了！