数据验证(模拟检测用户名是否存在)

      数据验证涉及到很多方面的东西，在当前的技术领域里，从技术上来看可以说是分为传统的验证（同步方式）和Ajax（异步方式）验证。如果从功能验证上来看的话就包罗万象了。比如非空验证，对等验证，格式验证等等。在.NET里还有专门用于验证的的几个常见验证控件，RequiredFieldValidator，RangeValidator，RegularExpressionValidator，CompareValidator，CustomValidator以及ValidationSummary等，这里不讨论他们的使用及原理。

一. 传统的验证方式
     在传统的验证中是采用同步表单提交的方法来处理的验证请求。这种验证方式的缺点很显然而知了。表单提交一是传输的数据量比较大消耗资源，二是页面处于同步方式随着表单的提交会刷新页面。下面我看来看看一个简单的传统验证的实例：
    建议一个ASP.NET项目，将默认页面改名为：TraditValidation.aspx，在页面.cs里定义一个模拟数据的方法如下：

 1/**//// <summary>
 2/// 模拟一个数据字典.判断用户名是否存在
 3/// </summary>
 4/// <param name="strUsername"></param>
 5/// <returns></returns>
 6private bool IsUsernameExist(string strUsername)
 7{
 8   bool bRet = false;
 9
10   switch (strUsername.ToLower())
11   {
12      case "beniao":
13      case "java":
14      case "admin":
15      case "ajax":
16      case "aspnet":
17      bRet = true; break;
18    }
19    return bRet;
20}

     接下来转到TraditValidation.aspx的html视图下，定义一个JavaScript方法来验证输入数据的合法性。

<script language="javascript">
function checkFrm()
{
     var tbUsername = document.getElementById("tbUsername");
     var msg = document.getElementById("lblMessage");
     var re = /^(\w{3,15})$/gim;
     if (re.test(tbUsername.value))
     {
         return true;
     }
     else
     {
         msg.innerHTML = "长度必须在3到15之间，且不包含字母、数字和下划线以外的字符！";
    msg.style.color = "red";
    return false;
     }
}
</script>

    转到设计视图，给页面上放置两个Lebal,一个TextBox,一个Button控件并适当的设置属性，html代码如下：

<form id="Form1" method="post" runat="server" onsubmit="return checkFrm()">
<asp:Label id="Label2" runat="server" Font-Names="黑体" Font-Bold="True" Font-Size="X-Large">传统的数据验证</asp:Label>
<hr>
<div>用户名：</div>
<asp:textbox id="tbUsername" runat="server"></asp:textbox>
<asp:button id="btnVerify" runat="server" Text="检查用户名" OnClick="btnVerify_Click"></asp:button>
<br>
<asp:label id="lblMessage" runat="server" ForeColor="Tomato"></asp:label>
</form>

    下面转到代码视图下去写btnVerify的单击事件方法：

 1protected void btnVerify_Click(object sender, EventArgs e)
 2{
 3    if (IsUsernameExist(tbUsername.Text))
 4    {
 5        lblMessage.Text = "用户名存在！";
 6        lblMessage.ForeColor = Color.Green;
 7    }
 8    else
 9    {
10        lblMessage.Text = "用户名不存在！";
11        lblMessage.ForeColor = Color.Red;
12    }
13}

     运行这个程序页面，当我门点击按扭的时候，提交表单并且页面刷新。下面是运行后的界面图：

-----------------------------------------------------------------------------------------------------------
二. Ajax验证方式
    上面的实例展示了传统的验证方式的过程，原理是用的表单提交同步的方法执行的。下面我们来看看Ajax的验证方式与传统的验证方式有什么不同，在上一篇文章中讲到XmlHttpRequest对象的异步请求实现Ajax功能。接下来还是通过一个使用XmlHttpRequest对象的实例来说明Ajax验证方法的过程。

    在上面建立的ASP.NET项目里新建立一个一般处理程序文件，命名为：AjaxHandler.ashx，同上在里面定义一个模拟数据字典的方法用来检测用户名是否存在IsUsernameExist(string strUsername)和一个验证数据合法性的方法IsValidUsername(string strUsername);详细定义如下：

    IsUsernameExist()方法的详细定义：

 1/**//// <summary>
 2    /// 模拟一个数据字典.判断用户名是否存在
 3    /// </summary>
 4    /// <param name="strUsername"></param>
 5    /// <returns></returns>
 6    private bool IsUsernameExist(string strUsername)
 7    {
 8        bool bRet = false;
 9        //在实际的项目应用中下面就可以去执行数据库查询进行验证
10        switch (strUsername.ToLower())
11        {
12            case "beniao":
13            case "java":
14            case "admin":
15            case "ajax":
16            case "aspnet":
17                bRet = true; break;
18        }
19        return bRet;
20    }

     IsValidUsername()方法的详细定义：

1/**//// <summary>
2    /// 验证字符串是否是3-15位
3    /// </summary>
4    /// <param name="strUsername"></param>
5    /// <returns></returns>
6    private bool IsValidUsername(string strUsername)
7    {
8        return (System.Text.RegularExpressions.Regex.IsMatch(strUsername, @"^(\w{3,15})$"));
9    }

       见于Ajax的运行步骤：创建对象---发送请求---响应请求---处理返回数据。
      下面我们来看看客户端JavaScript方法的定义，第一篇文章里我提过，要使用一个对象事先得创建一个对象的实例吧，在这里又将使用到XmlHttpRequest对象，所以我门先来定义一个方法创建XmlHttpRequest对象：

 1    var xmlHttp;
 2    function createXMLHttpRequest()
 3    {
 4        if(window.ActiveXObject)
 5        {
 6            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 7        }
 8        else if(window.XMLHttpRequest)
 9        {
10            xmlHttp = new XMLHttpRequest();
11        }
12    }

       定义一个向服务器发送请求的方法；

 1    //处理方法
 2    function CheckUsername()
 3    {
 4        createXMLHttpRequest();
 5        var strName=document.getElementById("tbUsername").value;
 6        var url= "AjaxHandler.ashx?strUsername="+strName;
 7        xmlHttp.open("GET",url,true);
 8        xmlHttp.onreadystatechange=ShowResult;
 9        xmlHttp.send(null);
10    }

     
       到这里通过分析上面的方法，已经创建好了XmlHttpRequest对，并定义好了向服务器发送请求的方法，指定了想AjaxHandler.ashax发起请求并传递一个参数给服务器端。那服务器是怎么处理这个请求的呢？下面我们来看看服务器端的处理过程的定义，在一般处理程序里，当请求发送给他过后是通过其内的一个叫ProcessRequest () 的方法来处理的，那么在这里我门要处理客户端发送过来的请求，是不是就应该修改ProcessRequest()方法的实现呢？答案是肯定的，如下：

 1    public void ProcessRequest (HttpContext context) 
 2    {
 3        context.Response.ContentType = "text/plain";
 4        string flag = string.Empty;
 5        string strUsername = context.Request.QueryString[0];
 6        if (!IsValidUsername(strUsername))
 7        {
 8            flag =  "1";
 9        }
10        else if (!IsUsernameExist(strUsername))
11        {
12            flag = "2";
13        }
14        else
15        {
16            flag = "0";
17        }
18        context.Response.Write(flag);
19    }

       分析上面代码，如果用户名不合法则返回1，如果存在则返回2，否则返回0，那么客户端的处理返回该怎么去定义呢？很显然是依赖于服务器端返回的这些数据了。客户端回调方法的详细定义如下：

 1//回调方法
 2function ShowResult()
 3{
 4   if(xmlHttp.readyState==4)
 5   {
 6       if(xmlHttp.status==200)
 7        {
 8           var bRet = xmlHttp.responseText;
 9       if (bRet == "0")
10       {
11          msg.innerHTML = '用户名存在！';
12          msg.style.color = 'green';
13       }
14       else if (bRet == "1")
15       {
16          msg.innerHTML = '用户名长度必须在3到15之间，且不包含字母、数字和下划线以外的字符！';
17              msg.style.color = 'red';
18       }
19       else
20       {
21         msg.innerHTML = '用户名不存在！';
22         msg.style.color = 'red';
23       }            
24       }
25   }
26}

      到这里客户端方法和服务器处理程序都OK了，下面我门在客户段来调用方法向服务器发送请求看看效果：

<form id="form1" runat="server">
    <asp:Label id="Label2" runat="server" Font-Names="黑体,Arial Black" Font-Bold="True" Font-Size="X-Large">
       基于AJAX的数据验证</asp:Label>
    <hr>
    <asp:Label id="Label1" runat="server">用户名：</asp:Label>
    <input id="tbUsername" type="text" onkeyup="CheckUsername(this.value)"/>
    <br>

    <div id="msg"></div>
    </form>

       运行结果如下所示：


本文实例源代码下载