数据验证(模拟检测用户名是否存在)
2009-10-26 21:48
585 查看
数据验证涉及到很多方面的东西,在当前的技术领域里,从技术上来看可以说是分为传统的验证(同步方式)和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>
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
}
接下来转到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的单击事件方法:
1
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()方法的详细定义:
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
//回调方法
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了,下面我门在客户段来调用方法向服务器发送请求看看效果:
<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>
运行结果如下所示:
[b]本文实例源代码下载[/b]
一. 传统的验证方式
在传统的验证中是采用同步表单提交的方法来处理的验证请求。这种验证方式的缺点很显然而知了。表单提交一是传输的数据量比较大消耗资源,二是页面处于同步方式随着表单的提交会刷新页面。下面我看来看看一个简单的传统验证的实例:
建议一个ASP.NET项目,将默认页面改名为:TraditValidation.aspx,在页面.cs里定义一个模拟数据的方法如下:
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
}
接下来转到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的单击事件方法:
1
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()方法的详细定义:
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
//回调方法
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了,下面我门在客户段来调用方法向服务器发送请求看看效果:
<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>
运行结果如下所示:
[b]本文实例源代码下载[/b]
相关文章推荐
- 数据验证(模拟检测用户名是否存在)
- 数据验证(模拟检测用户名是否存在) http://www.cnblogs.com/beniao/archive/2008/03/29/1129141.html
- JS实现AJAX提交数据到后台,实现验证用户名是否存在功能详解
- JS实现AJAX提交数据到后台,实现验证用户名是否存在功能详解
- JS实现AJAX提交数据到后台,实现验证用户名是否存在功能详解
- javascript 无刷新更新数据(例:验证输入的用户名是否存在)
- MVC 数据验证(检查用户名是否存在)
- spring+ajax+spring mvc+mybatis验证用户名是否存在
- 利用jQuery.validate异步验证用户名是否存在
- jquery与php交互的ajax应用第一课:检测用户注册时用户名是否存在
- 基于jQuery实现Ajax验证用户名是否存在实例
- Ajax检测用户名是否存在
- 解决使用Validform插件,datatype里用ajax验证数据是否已经存在时出现的问题
- jsp注册页面,Ajax实现验证用户名是否存在,密码是否一致,当不存在时,注册按钮变成灰色。
- SSH中的ajax jquery配置(注册验证用户名是否存在)
- 【java项目实践】详解Ajax工作原理以及实现异步验证用户名是否存在+源码下载(java版)
- jquery 验证用户名(ajax验证用户名是否存在)
- 利用jQuery实现的Ajax 验证用户名是否存在
- Ajax验证用户名是否已存在
- (2010-08-22)利用jQuery实现的Ajax 验证用户名是否存在