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

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

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

/// <summary>
2

/// 模拟一个数据字典.判断用户名是否存在
3

/// </summary>
4

/// <param name="strUsername"></param>
5

/// <returns></returns>
6

private bool IsUsernameExist(string strUsername)
7

{
8

bool bRet = false;
9

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方法来验证输入数据的合法性。

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代码如下：

<asp:Label id="Label2" runat="server" Font-Names="黑体" Font-Bold="True" Font-Size="X-Large">传统的数据验证</asp:Label>

<hr>

<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的单击事件方法：

protected 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()方法的详细定义：

/// <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()方法的详细定义：

/// <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对象：

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

}

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

//处理方法
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()方法的实现呢？答案是肯定的，如下：

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，那么客户端的处理返回该怎么去定义呢？很显然是依赖于服务器端返回的这些数据了。客户端回调方法的详细定义如下：

//回调方法
2

function 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了，下面我门在客户段来调用方法向服务器发送请求看看效果：

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

<br>

</form>

运行结果如下所示：

本文实例源代码下载